/* ==========================================================================
   sections-designer.css
   —— 设计师专区(designer) / 数据中心(data) / 专属特色功能(features) / 关于我们(about)
      四个板块的专属样式。

   约定：
     1. 类名前缀统一为 s-designer- / s-data- / s-features- / s-about-，
        与其它板块样式互不冲突。
     2. 通用控件（c-btn / c-card / c-tabs / c-table / c-filter / c-field /
        c-pager / c-chip / c-tag / c-stars / c-badge / c-kpi / c-grid）一律复用
        components.css 与 base.css，本文件只做「板块内布局 + 细节补强」。
     3. 全部使用 base.css 的 CSS 变量（--blue-deep / --blue-light / --silver /
        --orange / --orange-light / --gray-dark / --gray-light / --shadow /
        --shadow-deep），不硬编码主题色。
     4. 响应式四档与 responsive.css 保持一致：
        ≥1440px / 1024–1439px / 768–1023px / <768px，窄屏网格逐级降列。
   ========================================================================== */

/* ==========================================================================
   〇、四板块公共外壳
   ========================================================================== */
.s-designer,
.s-data,
.s-features,
.s-about {
  padding: 24px 0 40px;
}

.s-designer-head,
.s-data-head,
.s-features-head,
.s-about-head {
  margin-bottom: 18px;
}

.s-designer-head .section-title,
.s-data-head .section-title,
.s-features-head .section-title,
.s-about-head .section-title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  color: var(--blue-deep);
}

.s-designer-head .section-desc,
.s-data-head .section-desc,
.s-features-head .section-desc,
.s-about-head .section-desc {
  margin: 0;
  font-size: 14px;
  color: var(--gray-light);
}

/* 区块容器：白底圆角卡片 */
.s-designer-block,
.s-data-panel,
.s-features-block,
.s-about-block {
  background: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
}

.s-designer-block-tip,
.s-about-block-tip {
  font-size: 13px;
  color: var(--gray-light);
}

/* 小尺寸 / 文字型按钮（components.css 未提供，此处补齐，作用域限于四板块） */
.s-designer .c-btn.is-sm,
.s-data .c-btn.is-sm,
.s-features .c-btn.is-sm,
.s-about .c-btn.is-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.s-designer .c-btn.is-text,
.s-data .c-btn.is-text,
.s-features .c-btn.is-text,
.s-about .c-btn.is-text {
  padding: 4px 6px;
  border-color: transparent;
  background: transparent;
  color: var(--blue-light);
}

.s-designer .c-btn.is-text:hover,
.s-data .c-btn.is-text:hover,
.s-features .c-btn.is-text:hover,
.s-about .c-btn.is-text:hover {
  background: #F0F7FF;
  border-color: transparent;
  color: var(--blue-light);
}

/* 版块级小标题（左侧色条） */
.s-designer-subtitle,
.s-data-subtitle,
.s-features-subtitle {
  margin: 0 0 8px;
  padding-left: 8px;
  border-left: 3px solid var(--blue-light);
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-deep);
}

/* 图形资产（SVG）在容器内的自适应填充 */
.s-designer [class$="-cover"] > svg,
.s-data-report-cover > svg,
.s-about-partner-logo > svg,
.s-about-qr-img > svg,
.s-about-qr-modal-img > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   一、设计师专区 #designer
   ========================================================================== */

/* ---------- 数据概览 KPI / 入驻引导 ---------- */
.s-designer-kpi {
  min-height: 88px;
}

.s-designer-kpi .c-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 0;
}

.s-designer-kpi-card {
  min-width: 0;
}

.s-designer-kpi-unit {
  margin-left: 2px;
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  color: var(--gray-light);
}

.s-designer-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0A2463 0%, #1E65F3 100%);
  color: var(--white);
  box-shadow: var(--shadow);
}

.s-designer-join-body h5 {
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 600;
}

.s-designer-join-body p {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.7;
  opacity: .86;
}

.s-designer-join-rights {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.s-designer-join-rights li {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .92;
}

.s-designer-join-rights svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.s-designer-join-btn {
  height: 44px;
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.s-designer-join-btn:hover {
  background: var(--orange-light);
  border-color: var(--orange-light);
  color: var(--white);
}

/* ---------- 筛选栏 / 结果计数 / 工具条 ---------- */
.s-designer-filter {
  margin-bottom: 12px;
}

.s-designer-result {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--gray-dark);
}

.s-designer-count b {
  margin: 0 2px;
  color: var(--orange);
  font-size: 15px;
}

.s-designer-mbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.s-designer-pager {
  margin-top: 16px;
}

/* ---------- 接单大厅：需求卡 ---------- */
.s-designer-orders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-height: 120px;
}

.s-designer-demand {
  gap: 0;
  padding: 16px;
}

.s-designer-demand-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.s-designer-demand-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1F2430;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-designer-status {
  flex: none;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 10px;
  background: #F0F7FF;
  color: var(--blue-light);
}

.s-designer-status.is-primary {
  background: #F0F7FF;
  color: var(--blue-light);
}

.s-designer-status.is-warning {
  background: #FFF7E6;
  color: #D46B08;
}

.s-designer-status.is-muted {
  background: #F5F5F5;
  color: var(--gray-light);
}

.s-designer-demand-money {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange);
}

.s-designer-demand-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--gray-light);
}

.s-designer-demand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.s-designer-demand-foot {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #EDF1F7;
}

.s-designer-btn {
  padding: 5px 12px;
  font-size: 13px;
}

.s-designer-demand-detail {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--silver);
  border-radius: 6px;
  background-color: #F7F9FC;
}

.s-designer-demand-detail[hidden] {
  display: none;
}

.s-designer-demand-desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s-designer-demand-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}

.s-designer-demand-row b {
  color: var(--blue-deep);
  font-weight: 600;
}

.s-designer-demand-row p {
  color: var(--gray-dark);
  line-height: 1.7;
}

/* ---------- 设计师广场：成员卡 ---------- */
.s-designer-square > .c-grid {
  gap: 16px;
}

.s-designer-card {
  gap: 10px;
  padding: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.s-designer-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-deep);
}

.s-designer-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.s-designer-avatar,
.s-designer-avatar-lg {
  position: relative;
  flex: none;
  line-height: 0;
}

.s-designer-avatar > svg {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.s-designer-avatar-lg > svg {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.s-designer-dot {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--gray-light);
}

.s-designer-dot.is-online { background: #52C41A; }
.s-designer-dot.is-busy { background: #FAAD14; }
.s-designer-dot.is-offline { background: #BFBFBF; }

.s-designer-card-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s-designer-name {
  font-size: 15px;
  font-weight: 600;
  color: #1F2430;
}

.s-designer-title {
  font-size: 13px;
  color: var(--gray-dark);
}

.s-designer-status-text {
  font-size: 12px;
  color: var(--gray-light);
}

.s-designer-status-text.is-online { color: #389E0D; }
.s-designer-status-text.is-busy { color: #D46B08; }
.s-designer-status-text.is-offline { color: var(--gray-light); }

.s-designer-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-light);
}

.s-designer-meta-text {
  font-size: 12px;
  color: var(--gray-light);
}

.s-designer-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.s-designer-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed #EDF1F7;
  font-size: 12px;
  color: var(--gray-light);
}

.s-designer-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.s-designer-card-meta svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.s-designer-card-foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

/* ---------- 设计师主页（模态） ---------- */
.s-designer-home {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 4px;
}

.s-designer-home-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--silver);
}

.s-designer-home-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.s-designer-home-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-deep);
}

.s-designer-years {
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-light);
  background: #F2F5FA;
  border-radius: 10px;
}

.s-designer-home-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--gray-dark);
}

.s-designer-home-row svg {
  width: 13px;
  height: 13px;
}

.s-designer-home-bio {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-dark);
}

.s-designer-home-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.s-designer-home-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.s-designer-home-price-label {
  font-size: 12px;
  color: var(--gray-light);
}

.s-designer-home-price b {
  font-size: 20px;
  color: var(--orange);
}

.s-designer-home-price-tip {
  font-size: 12px;
  color: var(--gray-light);
}

.s-designer-works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.s-designer-work {
  border: 1px solid var(--silver);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}

.s-designer-work-cover {
  background: #F2F5FA;
}

.s-designer-work-cover > svg {
  display: block;
  width: 100%;
  height: auto;
}

.s-designer-work figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 8px;
}

.s-designer-work-title {
  font-size: 13px;
  font-weight: 600;
  color: #1F2430;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-designer-work-tags {
  font-size: 12px;
  color: var(--gray-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-designer-prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.s-designer-price-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--silver);
  border-radius: 6px;
  background: #FAFBFD;
}

.s-designer-price-item span {
  font-size: 13px;
  color: var(--gray-dark);
}

.s-designer-price-item b {
  font-size: 18px;
  color: var(--orange);
}

.s-designer-price-item i {
  font-style: normal;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray-light);
}

.s-designer-reviews {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s-designer-review {
  padding: 10px 12px;
  background: #FAFBFD;
  border-radius: 6px;
}

.s-designer-review-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
  color: #1F2430;
}

.s-designer-review-none {
  padding: 12px 0;
  font-size: 13px;
  color: var(--gray-light);
  text-align: center;
}

/* ---------- 素材中心 ---------- */
.s-designer-mtabs {
  margin-bottom: 10px;
}

.s-designer-mtabs-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.s-designer-materials {
  min-height: 140px;
}

.s-designer-masonry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.s-designer-material {
  border: 1px solid var(--silver);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.s-designer-material:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep);
}

.s-designer-material-cover {
  position: relative;
  background: #F2F5FA;
}

.s-designer-material-cover > svg {
  display: block;
  width: 100%;
  height: auto;
}

.s-designer-material-price,
.s-designer-material-free {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 10px;
}

.s-designer-material-price {
  color: var(--white);
  background: rgba(255, 122, 47, .92);
}

.s-designer-material-free {
  color: #389E0D;
  background: #F6FFED;
}

.s-designer-material figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
}

.s-designer-material-name {
  font-size: 13px;
  font-weight: 600;
  color: #1F2430;
}

.s-designer-material-sub {
  font-size: 12px;
  color: var(--gray-light);
}

.s-designer-upload {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- 素材预览（模态） ---------- */
.s-designer-preview {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
}

.s-designer-preview-cover {
  border: 1px solid var(--silver);
  border-radius: 8px;
  overflow: hidden;
  background: #F2F5FA;
}

.s-designer-preview-cover > svg {
  display: block;
  width: 100%;
  height: auto;
}

.s-designer-preview-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s-designer-preview-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--orange);
}

.s-designer-preview-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  font-size: 13px;
}

.s-designer-preview-meta div {
  display: flex;
  gap: 8px;
}

.s-designer-preview-meta dt {
  flex: none;
  color: var(--gray-light);
}

.s-designer-preview-meta dd {
  min-width: 0;
  color: var(--gray-dark);
}

.s-designer-preview-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--gray-dark);
}

.s-designer-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- 收益中心 ---------- */
.s-designer-income {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.s-designer-income-left,
.s-designer-income-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-designer-balance {
  padding: 16px;
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(135deg, #0A2463 0%, #1E65F3 100%);
  box-shadow: var(--shadow);
}

.s-designer-balance-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.s-designer-balance-label {
  font-size: 13px;
  opacity: .85;
}

.s-designer-balance-value {
  font-size: 26px;
  font-weight: 700;
}

.s-designer-balance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.s-designer-balance-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .12);
  border-radius: 6px;
}

.s-designer-balance-item span {
  font-size: 12px;
  opacity: .82;
}

.s-designer-balance-item b {
  font-size: 15px;
}

.s-designer-balance-trend {
  padding: 10px;
  background: rgba(255, 255, 255, .1);
  border-radius: 6px;
}

.s-designer-balance-trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  opacity: .85;
}

.s-designer-balance-trend-head i {
  font-style: normal;
  color: #FFD9BF;
}

.s-designer-balance-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.s-designer-income-form {
  padding: 16px;
  border: 1px solid var(--silver);
  border-radius: 8px;
  background: #FAFBFD;
}

.s-designer-income-form .c-form-actions {
  margin-top: 4px;
}

.s-designer-income-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.s-designer-income-tabs .s-designer-subtitle {
  margin: 0;
}

.s-designer-table {
  margin-bottom: 8px;
}

.s-designer-td-strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1F2430;
}

.s-designer-td-sub {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--gray-light);
}

/* ---------- 学习中心课程卡 ---------- */
.s-designer-study > .c-grid {
  gap: 16px;
}

.s-designer-course {
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.s-designer-course:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-deep);
}

.s-designer-course-cover {
  position: relative;
  background: #F2F5FA;
}

.s-designer-course-cover > svg {
  display: block;
  width: 100%;
  height: auto;
}

.s-designer-course-level {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--white);
  background: rgba(10, 36, 99, .82);
  border-radius: 10px;
}

.s-designer-course-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.s-designer-course-title {
  font-size: 14px;
  font-weight: 600;
  color: #1F2430;
}

.s-designer-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--gray-light);
}

.s-designer-course-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed #EDF1F7;
}

.s-designer-course-progress {
  font-size: 12px;
  color: var(--blue-light);
}

/* ==========================================================================
   二、数据中心 #data
   ========================================================================== */

.s-data-roles {
  margin-bottom: 20px;
}

.s-data-roles-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.s-data-sub {
  margin-bottom: 4px;
}

.s-data-sub-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: #F7F9FC;
  border: 1px solid var(--silver);
  border-radius: 8px;
}

.s-data-sub-inner .c-tabs-item.is-active {
  background: var(--blue-light);
  color: var(--white);
  border-radius: 14px;
}

.s-data-sub-inner .c-tabs-item.is-active::after {
  display: none;
}

.s-data-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #EDF1F7;
}

.s-data-sub + .s-data-block {
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}

.s-data-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.s-data-kpi-card {
  min-width: 0;
}

.s-data-kpi-spark {
  margin-top: 8px;
  overflow: hidden;
}

.s-data-kpi-spark svg {
  display: block;
  width: 100%;
  height: auto;
}

.s-data-delta {
  font-style: normal;
  font-weight: 600;
}

.s-data-delta.is-up { color: #389E0D; }
.s-data-delta.is-down { color: #F5222D; }

.s-data-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.s-data-chart-head .s-data-subtitle {
  margin: 0;
}

.s-data-ranges,
.s-data-filter-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.s-data-export {
  padding: 5px 12px;
  font-size: 13px;
}

.s-data-export svg {
  width: 13px;
  height: 13px;
}

.s-data-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 16px;
}

.s-data-chart-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--silver);
  border-radius: 8px;
  background: #FCFDFF;
}

.s-data-chart-box > div[class^="c-chart"],
.s-data-chart-box > div:not([class]) {
  min-width: 0;
  overflow-x: auto;
}

.s-data-table {
  min-width: 0;
}

.s-data-td-strong {
  font-weight: 600;
  color: #1F2430;
}

.s-data-td-self {
  color: var(--blue-light);
  font-weight: 600;
}

.s-data-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--gray-light);
}

.s-data-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
  margin-top: 16px;
}

.s-data-insight {
  padding: 14px 16px;
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  background: #FFF9F5;
}

.s-data-insight h6 {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-deep);
}

.s-data-insight p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-dark);
}

/* ---------- 行业报告卡 ---------- */
.s-data-reports {
  min-height: 140px;
}

.s-data-reports > .c-grid {
  gap: 16px;
}

.s-data-report {
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.s-data-report:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-deep);
}

.s-data-report-cover {
  position: relative;
  background: #F2F5FA;
}

.s-data-report-price,
.s-data-report-free {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 10px;
}

.s-data-report-price {
  color: var(--white);
  background: rgba(255, 122, 47, .92);
}

.s-data-report-free {
  color: #389E0D;
  background: #F6FFED;
}

.s-data-report-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.s-data-report-title {
  font-size: 14px;
  font-weight: 600;
  color: #1F2430;
}

.s-data-report-summary {
  font-size: 12px;
  line-height: 1.7;
  color: var(--gray-light);
}

.s-data-report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--gray-dark);
}

.s-data-report-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed #EDF1F7;
}

.s-data-report-at {
  font-size: 12px;
  color: var(--gray-light);
}

.s-data-report-btn {
  flex: none;
  padding: 5px 12px;
  font-size: 13px;
}

/* ---------- 登录引导横幅 ---------- */
.s-data-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 20px;
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(135deg, #0A2463 0%, #1E65F3 100%);
  box-shadow: var(--shadow);
}

.s-data-notice-body h5 {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.s-data-notice-body p {
  font-size: 13px;
  line-height: 1.7;
  opacity: .86;
}

.s-data-notice .c-btn {
  flex: none;
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.s-data-notice .c-btn:hover {
  background: var(--orange-light);
  border-color: var(--orange-light);
  color: var(--white);
}

/* ==========================================================================
   三、专属特色功能 #features
   ========================================================================== */

.s-features-tip {
  font-size: 13px;
  color: var(--gray-light);
}

/* ---------- 顶部三张价值卡 ---------- */
.s-features-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.s-features-card {
  gap: 0;
  padding: 20px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.s-features-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-deep);
}

.s-features-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(135deg, var(--blue-light) 0%, var(--blue-deep) 100%);
}

.s-features-card-icon svg {
  width: 22px;
  height: 22px;
}

.s-features-card-title {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue-deep);
}

.s-features-card-desc {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-dark);
}

.s-features-card-points {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--gray-light);
}

.s-features-card-points li {
  padding-left: 12px;
  position: relative;
}

.s-features-card-points li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
}

.s-features-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  font-size: 13px;
  color: var(--blue-light);
}

.s-features-card-cta svg {
  width: 13px;
  height: 13px;
}

/* ---------- 地图找货 ---------- */
.s-features-map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.s-features-map-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.s-features-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--silver);
  border-radius: 8px;
  background: #F7F9FC;
}

.s-features-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.s-features-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--gray-dark);
}

.s-features-radius-num {
  color: var(--orange);
}

.s-features-slider {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--silver);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.s-features-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--white);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.s-features-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--white);
  cursor: pointer;
}

.s-features-map {
  position: relative;
  border: 1px solid var(--silver);
  border-radius: 8px;
  overflow: hidden;
  background: #EEF3FA;
}

.s-features-map .s-features-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
}

.s-features-map .s-features-canvas > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.s-features-radius-ring {
  position: absolute;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(30, 101, 243, .55);
  border-radius: 50%;
  background: rgba(30, 101, 243, .08);
  pointer-events: none;
}

/* 半径图层：铺满画布，内部圆环按百分比定位 */
.s-features-radius {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s-features-points {
  position: absolute;
  inset: 0;
}

.s-features-point {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.s-features-point-dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--blue-light);
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}

.s-features-point.is-active .s-features-point-dot,
.s-features-point.is-hl .s-features-point-dot {
  background: var(--orange);
  transform: scale(1.35);
}

.s-features-point-name {
  padding: 1px 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--blue-deep);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--silver);
  border-radius: 10px;
  white-space: nowrap;
}

.s-features-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  width: 168px;
  padding: 8px 10px;
  text-align: left;
  border-radius: 6px;
  background: var(--blue-deep);
  color: var(--white);
  box-shadow: var(--shadow-deep);
}

.s-features-point:hover .s-features-bubble,
.s-features-point.is-active .s-features-bubble {
  display: block;
}

.s-features-bubble-tags {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 12px;
  color: #FFD9BF;
}

.s-features-me {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.s-features-me > i {
  width: 14px;
  height: 14px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: var(--shadow);
}

.s-features-me > span {
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--orange);
  background: rgba(255, 255, 255, .95);
  border-radius: 10px;
  white-space: nowrap;
}

.s-features-map-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--gray-dark);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--silver);
  border-radius: 6px;
  white-space: nowrap;
}

/* ---------- 地图右侧结果列表 ---------- */
.s-features-result {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--silver);
  border-radius: 8px;
  background: #FCFDFF;
}

.s-features-result-head {
  padding-bottom: 8px;
  border-bottom: 1px dashed #EDF1F7;
  font-size: 13px;
  color: var(--gray-dark);
}

.s-features-result-head b {
  color: var(--orange);
}

.s-features-result-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 2px;
}

.s-features-result-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}

.s-features-result-item:hover {
  transform: translateY(-2px);
}

.s-features-result-item.is-active {
  border-color: var(--blue-light);
}

.s-features-result-avatar > svg {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.s-features-result-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.s-features-result-name {
  font-size: 14px;
  font-weight: 600;
  color: #1F2430;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-features-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-light);
}

.s-features-result-dist {
  color: var(--orange);
  font-weight: 600;
}

.s-features-result-city {
  padding: 0 6px;
  background: #F2F5FA;
  border-radius: 3px;
}

.s-features-result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.s-features-result-actions {
  display: flex;
  gap: 8px;
}

.s-features-btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.s-features-result-empty {
  padding: 24px 8px;
  font-size: 13px;
  color: var(--gray-light);
  text-align: center;
}

.s-features-pager {
  padding-top: 4px;
}

/* ---------- 电子合同 ---------- */
.s-features-contract {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.s-features-contract-main {
  min-width: 0;
}

.s-features-contract-side {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--silver);
  border-radius: 8px;
  background: #FCFDFF;
}

.s-features-table {
  min-width: 0;
}

.s-features-td-no {
  font-family: Consolas, Menlo, monospace;
  font-size: 12px;
  color: var(--gray-dark);
}

.s-features-td-strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1F2430;
}

.s-features-td-sub {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--gray-light);
}

.s-features-td-sign {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
  color: #389E0D;
  background: #F6FFED;
  border-radius: 3px;
}

/* 签署流程步骤条 */
.s-features-flow-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.s-features-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.s-features-flow-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 14px;
  cursor: pointer;
}

.s-features-flow-item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 24px;
  bottom: 2px;
  width: 2px;
  background: var(--silver);
}

.s-features-flow-item:last-child::before {
  display: none;
}

.s-features-flow-index {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 12px;
  color: var(--gray-light);
  background: var(--white);
  border: 2px solid var(--silver);
  border-radius: 50%;
}

.s-features-flow-body h6 {
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-dark);
}

.s-features-flow-body p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray-light);
}

.s-features-flow-item.is-done .s-features-flow-index,
.s-features-flow-item.is-current .s-features-flow-index {
  color: var(--white);
  background: var(--blue-light);
  border-color: var(--blue-light);
}

.s-features-flow-item.is-focused .s-features-flow-index,
.s-features-flow-item.is-active .s-features-flow-index {
  color: var(--white);
  background: var(--orange);
  border-color: var(--orange);
}

.s-features-flow-item.is-done .s-features-flow-body h6,
.s-features-flow-item.is-current .s-features-flow-body h6,
.s-features-flow-item.is-focused .s-features-flow-body h6,
.s-features-flow-item.is-active .s-features-flow-body h6 {
  color: var(--blue-deep);
}

.s-features-flow-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #EDF1F7;
}

.s-features-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--gray-light);
}

/* ---------- 手写签名 ---------- */
.s-features-sign {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;
}

.s-features-sign-contract {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s-features-sign-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  padding: 12px 14px;
  background: #F7F9FC;
  border-radius: 6px;
  font-size: 13px;
}

.s-features-sign-meta dt {
  color: var(--gray-light);
}

.s-features-sign-meta dd {
  min-width: 0;
  color: var(--gray-dark);
  font-weight: 600;
}

.s-features-sign-clauses {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  list-style: disc;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-dark);
}

.s-features-sign-clauses li {
  list-style: disc;
}

.s-features-sign-pad {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s-features-sign-pad .s-features-canvas {
  display: block;
  width: 100%;
  max-width: 520px;
  height: 180px;
  border: 1px dashed var(--silver);
  border-radius: 6px;
  background: var(--white);
  cursor: crosshair;
  touch-action: none;
}

.s-features-sign-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.s-features-sign-tip {
  font-size: 12px;
  color: var(--gray-light);
}

.s-features-sign-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-dark);
  cursor: pointer;
}

.s-features-sign-agree input {
  margin-top: 4px;
  flex: none;
}

.s-features-sign-save {
  align-self: flex-start;
  min-width: 140px;
}

.s-features-sign-preview {
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--silver);
  border-radius: 6px;
  background: #FAFBFD;
}

.s-features-sign-preview > svg {
  display: block;
  width: 100%;
  height: auto;
}

.s-features-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- 多方沟通 ---------- */
.s-features-chat {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  min-height: 460px;
  border: 1px solid var(--silver);
  border-radius: 8px;
  overflow: hidden;
}

.s-features-chat-sessions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-right: 1px solid var(--silver);
  background: #F7F9FC;
  max-height: 520px;
  overflow-y: auto;
}

.s-features-session {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease;
}

.s-features-session:hover {
  background: #EEF3FA;
}

.s-features-session.is-active {
  border-color: var(--blue-light);
  background: var(--white);
}

.s-features-session-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s-features-session-name {
  font-size: 13px;
  font-weight: 600;
  color: #1F2430;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-features-session-last {
  font-size: 12px;
  color: var(--gray-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-features-session-at {
  font-size: 12px;
  color: var(--gray-light);
  white-space: nowrap;
}

.s-features-session-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  color: var(--white);
  background: #FF4D4F;
  border-radius: 9px;
}

.s-features-chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
}

.s-features-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--silver);
}

.s-features-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-deep);
}

.s-features-chat-title > svg {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.s-features-chat-status {
  padding: 1px 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--gray-light);
  background: #F2F5FA;
  border-radius: 10px;
}

.s-features-chat-status.is-online {
  color: #389E0D;
  background: #F6FFED;
}

.s-features-chat-note {
  font-size: 12px;
  color: var(--gray-light);
}

.s-features-chat-stream {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  max-height: 420px;
  overflow-y: auto;
  padding: 16px;
  background: #FAFBFD;
}

.s-features-msg {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.s-features-msg.is-mine {
  grid-template-columns: minmax(0, 1fr) 32px;
}

.s-features-msg.is-mine .s-features-msg-avatar {
  order: 2;
}

.s-features-msg.is-mine .s-features-msg-bubble {
  order: 1;
  text-align: right;
  color: var(--white);
  background: var(--blue-light);
  border-color: var(--blue-light);
}

.s-features-msg.is-mine .s-features-msg-bubble span {
  color: rgba(255, 255, 255, .75);
}

.s-features-msg-avatar > svg {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.s-features-msg-bubble {
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--silver);
  border-radius: 8px;
  background: var(--white);
}

.s-features-msg-bubble p {
  font-size: 13px;
  line-height: 1.7;
  color: inherit;
  word-break: break-word;
}

.s-features-msg-bubble span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--gray-light);
}

.s-features-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--gray-light);
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: 14px;
}

.s-features-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray-light);
  animation: s-features-typing 1.2s infinite ease-in-out;
}

.s-features-typing i:nth-child(2) { animation-delay: .2s; }
.s-features-typing i:nth-child(3) { animation-delay: .4s; }

@keyframes s-features-typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.s-features-chat-empty {
  margin: auto;
  padding: 24px 0;
  font-size: 13px;
  color: var(--gray-light);
  text-align: center;
}

.s-features-chat-composer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--silver);
}

.s-features-chat-emojis {
  display: flex;
  gap: 6px;
  width: 100%;
}

.s-features-emoji {
  width: 28px;
  height: 28px;
  font-size: 15px;
  line-height: 1;
  border: 1px solid var(--silver);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  transition: border-color .2s ease;
}

.s-features-emoji:hover {
  border-color: var(--orange);
}

.s-features-chat-input {
  flex: 1;
  min-width: 160px;
  min-height: 46px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.6;
  color: #1F2430;
  border: 1px solid var(--silver);
  border-radius: 6px;
  outline: none;
  resize: vertical;
}

.s-features-chat-input:focus {
  border-color: var(--orange);
}

.s-features-chat-composer .c-btn {
  flex: none;
  height: 46px;
}

/* ==========================================================================
   四、关于我们 #about
   ========================================================================== */

.s-about-nav {
  position: sticky;
  top: 88px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--silver);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.s-about-nav-item {
  padding: 5px 14px;
  font-size: 13px;
  color: var(--gray-dark);
  background: #F2F5FA;
  border-radius: 14px;
  transition: background .2s ease, color .2s ease;
}

.s-about-nav-item:hover {
  color: var(--blue-light);
}

.s-about-nav-item.is-active {
  color: var(--white);
  background: var(--blue-light);
}

/* ---------- 平台简介 ---------- */
.s-about-story {
  position: relative;
  overflow: hidden;
  max-height: 168px;
  transition: max-height .35s ease;
}

.s-about-story.is-expanded {
  max-height: 1200px;
}

.s-about-story-p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--gray-dark);
  text-indent: 2em;
}

.s-about-story-p.is-lead {
  color: #1F2430;
  font-weight: 500;
}

.s-about-story-more {
  margin-top: 8px;
  text-align: right;
}

.s-about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.s-about-kpi {
  min-width: 0;
}

/* ---------- 核心团队 ---------- */
.s-about-team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.s-about-member {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.s-about-member:hover,
.s-about-member.is-active {
  transform: translateY(-3px);
  border-color: var(--blue-light);
  box-shadow: var(--shadow-deep);
}

.s-about-member-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.s-about-member-top > svg {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.s-about-member-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s-about-member-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-deep);
}

.s-about-member-title {
  font-size: 13px;
  color: var(--gray-dark);
}

.s-about-member-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.s-about-member-bio {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-dark);
}

.s-about-member-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.s-about-member-actions {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed #EDF1F7;
}

.s-about-member-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 4px;
}

.s-about-member-modal-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--silver);
}

.s-about-member-modal-top > svg {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.s-about-member-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--gray-dark);
}

.s-about-member-signature {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--blue-deep);
  background: #F7F9FC;
  border-left: 3px solid var(--orange);
  border-radius: 6px;
}

/* ---------- 发展历程时间轴 ---------- */
.s-about-tl {
  position: relative;
  display: flex;
  flex-direction: column;
}

.s-about-tl::before {
  content: "";
  position: absolute;
  left: 85px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, rgba(30, 101, 243, .18) 0%, rgba(30, 101, 243, .55) 100%);
}

.s-about-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 78px 16px minmax(0, 1fr);
  align-items: start;
  gap: 0 8px;
  padding-bottom: 18px;
  opacity: .45;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}

.s-about-tl-item.is-in {
  opacity: 1;
  transform: translateY(0);
}

.s-about-tl-item:last-child {
  padding-bottom: 0;
}

.s-about-tl-year {
  grid-column: 1;
  padding-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-light);
  text-align: right;
}

.s-about-tl-dot {
  grid-column: 2;
  justify-self: center;
  margin-top: 4px;
  width: 14px;
  height: 14px;
  z-index: 1;
  border: 3px solid var(--blue-light);
  border-radius: 50%;
  background: var(--white);
}

.s-about-tl-card {
  grid-column: 3;
  padding: 12px 16px;
  border: 1px solid var(--silver);
  border-radius: 8px;
  background: #F7F9FC;
}

.s-about-tl-title {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-deep);
}

.s-about-tl-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-dark);
}

/* ---------- 合作伙伴 ---------- */
.s-about-partners {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.s-about-partner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: 8px;
  cursor: default;
  transition: transform .25s ease, box-shadow .25s ease;
}

.s-about-partner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-deep);
}

.s-about-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
}

.s-about-partner-logo > svg {
  max-width: 64px;
  max-height: 64px;
}

.s-about-partner-name {
  font-size: 13px;
  color: var(--gray-dark);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.s-about-partner-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--white);
  background: var(--blue-deep);
  border-radius: 4px;
  white-space: nowrap;
}

.s-about-partner:hover .s-about-partner-tip,
.s-about-partner:focus .s-about-partner-tip {
  display: block;
}

/* ---------- 招商政策 ---------- */
.s-about-policies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.s-about-policy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.s-about-policy:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-deep);
}

.s-about-policy.is-active {
  border-color: var(--orange);
}

.s-about-policy-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.s-about-policy-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-deep);
}

.s-about-policy-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-dark);
}

.s-about-policy-rights {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-dark);
}

.s-about-policy-rights li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.s-about-check {
  flex: none;
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: #F6FFED;
  border: 1px solid #B7EB8F;
}

.s-about-check::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 5px;
  height: 8px;
  border: solid #52C41A;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.s-about-policy-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed #EDF1F7;
}

.s-about-policy-mail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: var(--gray-light);
}

.s-about-policy-mail svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* ---------- 合作留言 ---------- */
.s-about-coop-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}

.s-about-coop-form {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--silver);
  border-radius: 8px;
  background: #FCFDFF;
}

.s-about-ticket-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid #B7EB8F;
  border-radius: 8px;
  background: #F6FFED;
}

.s-about-ticket-result-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #389E0D;
}

.s-about-ticket-result-body {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.s-about-ticket-result-body > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.s-about-ticket-result-body dt {
  color: var(--gray-light);
}

.s-about-ticket-result-body dd {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-dark);
}

.s-about-ticket-result-body .is-code {
  font-family: Consolas, Menlo, monospace;
  color: var(--blue-deep);
}

.s-about-tickets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.s-about-ticket {
  padding: 12px 14px;
  border: 1px solid var(--silver);
  border-radius: 6px;
  background: var(--white);
}

.s-about-ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.s-about-ticket-id {
  font-family: Consolas, Menlo, monospace;
  font-size: 13px;
  color: var(--blue-deep);
}

.s-about-ticket-at {
  font-size: 12px;
  color: var(--gray-light);
}

.s-about-ticket-line {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--gray-dark);
}

.s-about-ticket-msg {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-light);
}

.s-about-ticket-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- 联系我们 ---------- */
.s-about-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.s-about-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.s-about-info-item {
  display: grid;
  grid-template-columns: 140px minmax(0, auto) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dashed #EDF1F7;
}

.s-about-info-item:last-child {
  border-bottom: none;
}

.s-about-info-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--blue-deep);
  font-weight: 600;
}

.s-about-info-label svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.s-about-info-value {
  font-size: 14px;
  color: var(--gray-dark);
  word-break: break-all;
}

.s-about-info-value.is-link:hover {
  color: var(--blue-light);
  text-decoration: underline;
}

.s-about-info-extra {
  font-size: 12px;
  color: var(--gray-light);
  white-space: nowrap;
}

.s-about-contact-info {
  min-width: 0;
}

.s-about-qrs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.s-about-qr {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: 8px;
  text-align: center;
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease;
}

.s-about-qr:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-deep);
}

.s-about-qr-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: 6px;
}

.s-about-qr-img > svg {
  max-width: 108px;
}

.s-about-qr-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-deep);
}

.s-about-qr-tip {
  font-size: 12px;
  color: var(--gray-light);
}

.s-about-qr-zoom {
  font-size: 12px;
  color: var(--blue-light);
  opacity: 0;
  transition: opacity .2s ease;
}

.s-about-qr:hover .s-about-qr-zoom,
.s-about-qr:focus .s-about-qr-zoom {
  opacity: 1;
}

.s-about-qr-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.s-about-qr-modal-img {
  width: 240px;
  max-width: 100%;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: 8px;
}

.s-about-qr-modal-text {
  font-family: Consolas, Menlo, monospace;
  font-size: 13px;
  color: var(--blue-deep);
  word-break: break-all;
}

.s-about-qr-modal-tip {
  font-size: 13px;
  color: var(--gray-light);
}

/* ==========================================================================
   五、响应式
   档位：≥1440 / 1024–1439 / 768–1023 / <768
   ========================================================================== */

/* ---------- 1024–1439px：主网格降列 ---------- */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .s-designer-kpi .c-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-designer-orders {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-designer-masonry {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .s-designer-income {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .s-features-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .s-features-map-wrap {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .s-features-contract {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .s-features-chat {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .s-about-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-about-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .s-about-partners {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .s-about-policies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-about-contact {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .s-designer-preview {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

/* ---------- 768–1023px：单列为主，侧栏下沉 ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .s-designer-block,
  .s-data-panel,
  .s-features-block,
  .s-about-block {
    padding: 18px;
  }

  .s-designer-join {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-designer-join-btn {
    justify-self: start;
    min-width: 180px;
  }

  .s-designer-kpi .c-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-designer-orders,
  .s-designer-prices,
  .s-designer-works {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-designer-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-designer-income {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-designer-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-data-notice {
    flex-direction: column;
    align-items: flex-start;
  }

  .s-features-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-features-map-wrap,
  .s-features-contract {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-features-result-list {
    max-height: 320px;
  }

  .s-features-chat {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .s-features-sign-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-about-nav {
    position: static;
  }

  .s-about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-about-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-about-partners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .s-about-policies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-about-contact,
  .s-about-coop-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-about-qrs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- <768px：全部单列 ---------- */
@media screen and (max-width: 767px) {
  .s-designer,
  .s-data,
  .s-features,
  .s-about {
    padding: 16px 0 28px;
  }

  .s-designer-head .section-title,
  .s-data-head .section-title,
  .s-features-head .section-title,
  .s-about-head .section-title {
    font-size: 20px;
  }

  .s-designer-block,
  .s-data-panel,
  .s-features-block,
  .s-about-block {
    padding: 14px;
    margin-bottom: 16px;
  }

  .s-designer-kpi .c-kpi-row,
  .s-designer-orders,
  .s-designer-masonry,
  .s-designer-prices,
  .s-designer-works,
  .s-data-kpi,
  .s-data-charts,
  .s-data-insights,
  .s-features-cards,
  .s-features-map-wrap,
  .s-features-contract,
  .s-about-stats,
  .s-about-team,
  .s-about-policies,
  .s-about-partners,
  .s-about-coop-body,
  .s-about-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .s-designer-mbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .s-designer-demand-foot,
  .s-designer-card-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .s-designer-demand-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .s-designer-home-head {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .s-designer-home-price {
    grid-column: 1 / -1;
    align-items: flex-start;
  }

  .s-designer-preview,
  .s-designer-income {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-designer-preview-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-designer-balance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .s-data-notice {
    flex-direction: column;
    align-items: stretch;
  }

  .s-data-chart-head {
    align-items: flex-start;
  }

  .s-features-chat {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-features-chat-sessions {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--silver);
  }

  .s-features-session {
    flex: none;
    width: 200px;
  }

  .s-features-chat-stream {
    min-height: 220px;
    max-height: 320px;
  }

  .s-features-chat-input {
    min-width: 0;
    width: 100%;
  }

  .s-features-sign-pad .s-features-canvas {
    height: 150px;
  }

  .s-about-nav {
    position: static;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .s-about-nav-item {
    flex: none;
  }

  .s-about-tl::before {
    left: 5px;
  }

  .s-about-tl-item {
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0 10px;
  }

  .s-about-tl-year {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding-top: 0;
  }

  .s-about-tl-dot {
    grid-column: 1;
    grid-row: 1;
    margin-top: 4px;
  }

  .s-about-tl-card {
    grid-column: 2;
    grid-row: 2;
  }

  .s-about-info-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .s-about-info-extra {
    white-space: normal;
  }

  .s-about-policy-mail {
    word-break: break-all;
  }
}