/* ============================================================
   状态页 (page-faq page-status) — 主设计稿 1333/1337/1347/1355/1360 系列
   独立状态页: 4040 / 建设中 / 网络异常 / 500 / 暂无内容 / 加载中
   插图(306×200)@y299 + 文案@y523 + 按钮124×48@y613 + footer
   加载中: 动画180×180@y405 + 文案@y585, 帧高1080 无footer
   = faq.css 头部白底样式 + 状态专属
   ============================================================ */
@import url('faq.css');

/* ---------- 页面白底 ---------- */
body.page-status { background: #fff; }

/* ============ 状态主体 ============ */
.status-main {
  margin-top: 64px;                  /* fixed header 占位 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 339px;             /* 文案底 621 → footer 960 = 339 */
}

/* ---------- 插图 (设计 306×200 @y299) ---------- */
.status-ill {
  margin-top: 235px;                 /* header 64 → 插图 299 = 235 */
  width: 306px;
  max-width: 100%;
}
.status-ill svg,
.status-ill img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 加载中: 无 header/footer 纯加载状态, 动画 180×180 @y405 ---------- */
.status-main--loading {
  margin-top: 0;                      /* 无 header 占位 */
  padding-bottom: 0;                  /* 无 footer */
}
.status-main--loading .status-ill {
  margin-top: 405px;                  /* 设计稿帧内动画 y=405 */
  width: 180px;
}
.status-main--loading .status-msg { margin-top: 0; }
.st-spin { animation: st-rotate 1.2s linear infinite; }
@keyframes st-rotate { to { transform: rotate(360deg); } }

/* ---------- 文案 (设计 主@y523 副@y561) ---------- */
.status-msg {
  margin-top: 24px;                  /* 插图底 499 → 文案 523 = 24 */
  text-align: center;
}
.status-title {
  margin: 0;
  font-size: 20px;
  font-weight: 666;
  line-height: 30px;
  color: #2E3033;
}
.status-sub {
  margin: 8px 0 0;                   /* 标题底 553 → 副标题 561 = 8 */
  font-size: 14px;
  font-weight: 513;
  line-height: 20px;
  color: #2E3033;
  opacity: .85;
}

/* ---------- 按钮 (设计 124×48 圆角6 #2168E5 @y613) ---------- */
.status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;                  /* 文案底 581 → 按钮 613 = 32 */
  min-width: 124px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 6px;
  background: #2168E5;
  color: #fff;
  font-size: 16px;
  font-weight: 666;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease;
}
.status-btn:hover { background: #1A56C4; }
/* 网络异常: 无副标题, 按钮 @y585 */
.status-main--net .status-btn { margin-top: 32px; }

/* ============ 自适应 ============ */
@media (max-width: 767px) {
  .status-main { padding-bottom: 120px; }
  .status-ill { margin-top: 140px; width: 240px; }
  .status-main--loading .status-ill { margin-top: 260px; width: 140px; }
  .status-msg { margin-top: 20px; }
  .status-title { font-size: 17px; line-height: 26px; }
  .status-sub { font-size: 13px; }
  .status-btn { margin-top: 24px; min-width: 112px; height: 44px; font-size: 15px; }
}

@media (max-width: 400px) {
  .status-main { padding-bottom: 96px; }
  .status-ill { margin-top: 112px; width: 200px; }
  .status-main--loading .status-ill { margin-top: 220px; width: 120px; }
  .status-title { font-size: 16px; }
}

/* 搜索无结果等场景: 内容垂直居中展示 */
.status-main--center {
  min-height: calc(100vh - 64px);   /* 撑满 header 以下视口, 内容垂直居中 */
  justify-content: center;
  padding-bottom: 0;
}
.status-main--center .status-ill { margin-top: 0; }

/* 搜索 tab 面板内: 0 结果状态块 (保留 tab 切换) */
.status-main--panel {
  min-height: 320px;
  justify-content: center;
  padding-bottom: 0;
  margin-top: 0;
}
.status-main--panel .status-ill { margin-top: 0; width: 180px; }
.status-main--panel .status-msg { margin-top: 16px; }
.status-main--panel .status-title { font-size: 22px; }
.status-main--panel .status-sub { font-size: 14px; }