@charset "UTF-8";
/* ============================================================
   闪得 需求广场（中栏）- 作用域样式
   句柄: shande-demand-plaza
   从 templates.css 抽取需求广场中栏样式，作用域限定 .shande-demand-plaza。
   ============================================================ */

.shande-demand-plaza .demand-plaza__left {
  background: #f8fafb;
  border-radius: 16px;
  padding: 28px;
}

.shande-demand-plaza .demand-plaza__header {
  margin-bottom: 24px;
  text-align: center;
}
.shande-demand-plaza .demand-plaza__section-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 14px;
  text-align: center;
}
.shande-demand-plaza .demand-plaza__title {
  font-size: 22px;
  font-weight: 700;
  color: #1d2129;
  margin: 0 0 8px;
}
.shande-demand-plaza .demand-plaza__desc {
  font-size: 13px;
  color: #86909c;
  line-height: 1.8;
  margin: 0;
}
.shande-demand-plaza .demand-plaza__desc .highlight {
  display: inline-flex;
  align-items: center;
  background: #eff6ff;
  color: #096ddd;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  margin: 0 4px;
}

.shande-demand-plaza .demand-plaza__list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}
.shande-demand-plaza .demand-plaza__list-title {
  font-size: 15px;
  font-weight: 600;
  color: #1d2129;
}
.shande-demand-plaza .demand-plaza__list-more {
  font-size: 13px;
  color: #86909c;
  text-decoration: none;
}
.shande-demand-plaza .demand-plaza__list-more:hover {
  color: #096ddd;
}

.shande-demand-plaza .demand-plaza__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.shande-demand-plaza .demand-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.shande-demand-plaza .demand-card:hover {
  border-color: #096ddd;
  box-shadow: 0 4px 14px rgba(9, 109, 221, 0.12);
  transform: translateY(-2px);
}
.shande-demand-plaza .demand-card__content {
  flex: 1;
  min-width: 0;
}
.shande-demand-plaza .demand-card__title {
  font-size: 15px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 6px;
}
.shande-demand-plaza .demand-card__desc {
  font-size: 13px;
  color: #86909c;
  line-height: 1.6;
}
.shande-demand-plaza .demand-card__desc a {
  color: #096ddd;
  text-decoration: none;
}
.shande-demand-plaza .demand-card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.shande-demand-plaza .demand-card__vote {
  width: auto;
  min-width: 40px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e8eaed;
  border-radius: 6px;
  background: #eff6ff;
  color: #096ddd;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.shande-demand-plaza .demand-card__vote:hover {
  background: #dbeafe;
  border-color: #096ddd;
}
.shande-demand-plaza .demand-card__vote.voted {
  background: #e5e7eb;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: default;
}
.shande-demand-plaza .demand-card__count {
  font-size: 11px;
  color: #86909c;
}

.shande-demand-plaza .demand-plaza__submit {
  text-align: center;
}
.shande-demand-plaza .demand-plaza__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 48px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
  /* 先给一个不依赖变量的纯色兜底，再叠渐变。
     var() 只要拿不到值（本文件早于 shande-base.css 生效、或作用域类还没挂上）
     整条 background 声明就会失效，按钮会变成透明底白字 —— 等于看不见。
     拆成两条后，即使渐变那条没生效，也还有纯色背景撑着。 */
  background: #096ddd;
  background-image: linear-gradient(135deg, var(--gradient-end, #49c9e9) 0%, var(--gradient-start, #096ddd) 100%);
  border: none;
  border-radius: 28px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(9, 109, 221, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.shande-demand-plaza .demand-plaza__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(9, 109, 221, 0.4);
}

/* ============================================================
   弹窗统一规格（详情 .sd-modal / 发布 .demand-modal 共用）
   ------------------------------------------------------------
   原本两套弹窗各写一份尺寸与动画：详情圆角 14px / max-width 580px，
   发布圆角 12px / width 600px，遮罩一个 .45 一个 .5，
   进入动画只有详情有、退出动画两个都没有（JS 直接 removeChild，弹窗「啪」地消失）。

   这里把两者的视觉规格收进一组变量，两套类名共用同一份动画与间距，
   改一次两边同时生效。发布弹窗的 flex 列布局 + 独立 footer 保持不变
   （它的 body 要独立滚动，不能改成整体滚动）。
   ============================================================ */
/* 注意类名冲突：css/user.css 里也有一套 .demand-modal，但那边是把 .demand-modal
   当「全屏遮罩」用（内部再套 .demand-modal__dialog），个人中心的发票弹窗仍在用。
   而这里的 .demand-modal 是「面板」本身，外面另有 .demand-modal-overlay。
   个人中心小部件同时加载 user.css 与本文件，两套同名规则会互相污染
   （__close、__body 也同名）。
   所以本文件里所有 .demand-modal* 规则一律限定在 .demand-modal-overlay 之内，
   user.js 那套独立的 .demand-modal 遮罩不受影响。 */
.sd-modal-overlay,
.demand-modal-overlay {
  --sd-modal-radius: 14px;
  --sd-modal-pad: 24px;
  --sd-modal-dur: 0.26s;
  --sd-modal-ease: cubic-bezier(0.22, 0.85, 0.3, 1);

  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--sd-font, 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  /* 遮罩自身淡入；退出时由 .is-leaving 反向播放 */
  animation: sdOverlayIn var(--sd-modal-dur) ease both;
}

/* 弹窗面板：两套类名共用同一组尺寸与进入动画 */
.sd-modal,
.demand-modal-overlay .demand-modal {
  background: #fff;
  border-radius: var(--sd-modal-radius);
  width: 100%;
  max-width: 600px;
  max-height: 86vh;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
  animation: sdModalIn var(--sd-modal-dur) var(--sd-modal-ease) both;
}
/* 详情弹窗整体滚动；发布弹窗是 header/body/footer 三段，body 自己滚 */
.sd-modal { overflow-y: auto; }
.demand-modal-overlay .demand-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@keyframes sdOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sdModalIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sdOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes sdModalOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(12px) scale(0.97); }
}

/* 退出动画：JS 关闭时先加 .is-leaving，动画结束再移除节点。
   退出比进入略快（0.2 vs 0.26），符合「关闭要利落」的手感。 */
.sd-modal-overlay.is-leaving,
.demand-modal-overlay.is-leaving {
  animation: sdOverlayOut 0.2s ease both;
  pointer-events: none;
}
.sd-modal-overlay.is-leaving .sd-modal,
.demand-modal-overlay.is-leaving .demand-modal {
  animation: sdModalOut 0.2s var(--sd-modal-ease) both;
}

/* 尊重系统「减弱动效」设置：只保留淡入淡出，不做位移缩放 */
@media (prefers-reduced-motion: reduce) {
  .sd-modal,
  .sd-modal-overlay,
  .demand-modal-overlay,
  .demand-modal-overlay .demand-modal,
  .sd-modal-overlay.is-leaving .sd-modal,
  .demand-modal-overlay.is-leaving .demand-modal {
    animation-duration: 0.01s;
  }
}

/* 头部：两套统一间距与字号 */
.sd-modal__header,
.demand-modal-overlay .demand-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--sd-modal-pad);
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}
/* 详情弹窗整体滚动，头部吸顶 */
.sd-modal__header {
  position: sticky;
  top: 0;
  border-radius: var(--sd-modal-radius) var(--sd-modal-radius) 0 0;
}
.sd-modal__header h3,
.demand-modal-overlay .demand-modal__header h3 {
  font-size: 17px;
  font-weight: 700;
  color: #1d2129;
  margin: 0;
}
.sd-modal__close,
.demand-modal-overlay .demand-modal__close {
  font-size: 22px;
  line-height: 1;
  color: #a5adb6;
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}
.sd-modal__close:hover,
.demand-modal-overlay .demand-modal__close:hover { background: #f3f5f7; color: #1d2129; }
.sd-modal__body { padding: var(--sd-modal-pad); }

/* 详情内部 */
.sd-detail__head { margin-bottom: 18px; }
.sd-detail__type {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #096ddd;
  background: #eff6ff;
  border-radius: 6px;
  padding: 4px 10px;
  margin-bottom: 10px;
}
.sd-detail__title {
  font-size: 19px;
  font-weight: 700;
  color: #1d2129;
  margin: 0 0 6px;
  line-height: 1.5;
}
.sd-detail__publisher {
  font-size: 12px;
  color: #a5adb6;
}
/*
 * 小标题（需求描述 / 风格倾向 / 补充信息）。
 *
 * 原来只有 margin-bottom，段间距全靠上一块自己的下边距撑：
 * __desc 与 __info 有 18px，但 __chips / __rows 没有，
 * 于是「风格倾向」紧贴上面的 chips、「补充信息」又紧贴前一段，挤成一坨。
 * 改为段间距由标签的上边距统一负责；首个标签抹掉上边距
 * （它紧跟 __head，那边已有 18px）。
 */
.sd-detail__label {
  font-size: 13px;
  font-weight: 700;
  color: #1d2129;
  margin: 20px 0 8px;
}
.sd-detail__label:first-child { margin-top: 0; }
.sd-detail__desc {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.9;
  background: #fafbfc;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  /* 段后间距交给下一个 __label 的上边距，避免两者叠加 */
  margin-bottom: 0;
}
.sd-detail__desc p { margin: 0 0 8px; }
.sd-detail__desc p:last-child { margin-bottom: 0; }
.sd-detail__desc ul,
.sd-detail__desc ol { margin: 0 0 8px; padding-left: 20px; }
.sd-detail__desc li { margin: 2px 0; }
.sd-detail__desc strong { color: #1d2129; }
.sd-detail__desc a { color: #096ddd; text-decoration: none; }
/*
 * 概要栏（预算 / 截止 / 同求 / 状态）。
 *
 * 原来是「白底 + 1px 边框 + 10px 圆角 + 18px 内边距」的卡片，
 * 但它本身就在白底弹窗里，等于在白上画一个白框，只剩边框线在起作用，
 * 还把四项挤在一个小盒子里。改成无边框无圆角，靠横线分隔行。
 *
 * column-gap 必须为 0：grid 没有「行」元素，横线只能画在单元格上，
 * 一旦有列间距，两个单元格的边框中间就断开一截。列间距改用
 * 左列的 padding-right 撑，边框仍连成一条完整的线。
 */
.sd-detail__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 20px 0 0;
  border-top: 1px solid #f1f5f9;
}
.sd-detail__info-item {
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}
.sd-detail__info-item:nth-child(odd) { padding-right: 20px; }
.sd-detail__info-item span {
  font-size: 11px;
  color: #86909c;
  display: block;
  margin-bottom: 3px;
}
.sd-detail__info-item strong {
  font-size: 16px;
  font-weight: 700;
}
/*
 * 操作区与上面拉开距离。
 *
 * 不再画上边框：概要栏最后一行自带下边框，再加一条就成了两条
 * 间距 20px 的平行线。概要栏那条已经起到收口作用。
 */
.sd-detail__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
/* 参考图与参考文件 */
.sd-detail__refs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* 图片：只展示本站代理的低清水印预览，不直接打开 OSS 原图。 */
.sd-detail__ref-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
}
.sd-detail__ref-img {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f8fafc center/cover no-repeat;
  transition: border-color 0.2s, transform 0.2s;
}
.sd-detail__ref-img:hover { border-color: #096ddd; transform: translateY(-2px); }
/*
 * 非图片：显示文件图标 + 文件名。
 * 之前参考文件在前台完全不展示（接口没返回 refs），
 * 商家看不到甲方给的参考资料，只能靠描述里的文字。
 */
.sd-detail__ref-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fafbfc;
  color: #4b5563;
  font-size: 13px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
}
.sd-detail__ref-file:hover { border-color: #096ddd; background: #f5f9ff; color: #096ddd; }
.sd-detail__ref-file.is-loading { opacity: 0.62; cursor: wait; }
.sd-detail__ref-file.is-locked { color: #96a0ad; cursor: default; }
.sd-detail__ref-file.is-locked:hover { border-color: #e5e7eb; background: #fafbfc; color: #96a0ad; }
.sd-detail__ref-file svg { flex-shrink: 0; color: #96a0ad; }
.sd-detail__ref-file:hover svg { color: #096ddd; }
.sd-detail__ref-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 190px;
}

/* 发布表单字段 */
.sd-form__group { margin-bottom: 18px; }
.sd-form__group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 8px;
}
.sd-form__group label .req { color: #096ddd; }
.sd-form__input,
.sd-form__select,
.sd-form__textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  color: #1d2129;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-form__textarea { resize: vertical; line-height: 1.7; min-height: 96px; }
.sd-form__input:focus,
.sd-form__select:focus,
.sd-form__textarea:focus {
  outline: none;
  border-color: #096ddd;
  box-shadow: 0 0 0 3px rgba(9, 109, 221, 0.1);
}

/* 按钮。
   <button> 与 <a> 两种标签都用这个类（详情弹窗里「我来制作」是 <a>、
   「关闭」是 <button>），所以尺寸相关的值必须写全、不依赖标签默认样式：
   display / line-height / box-sizing 三者只要有一个交给浏览器决定，
   两个按钮并排就会差几个像素。 */
.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 弹窗底部的操作按钮，不是页面主 CTA，收到 8px/18px + 13px 字号，
     与弹窗内其它文字（标签 13px）同一档。 */
  padding: 8px 18px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  box-sizing: border-box;
  /* 只过渡确实会变的属性。
     用 all 会把 color 也带上：次要按钮悬停时文字色在 0.2s 内从灰渐变到
     目标色，中途经过接近白色的过渡值，看起来就像「文字变白看不清」。 */
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* 次要按钮（如「关闭」）悬停：浅灰底 + 文字加深。
   必须显式写 color —— 不写的话继承链上的 a:hover / button:hover 规则
   可能把文字改成主题色或白色，白底白字就看不见了。
   限定 :not(.sd-btn--primary)：这条选择器特异性 (0,2,0) 高于
   .sd-btn--primary (0,1,0)，不排除主按钮的话浅灰会盖掉它的渐变。 */
.sd-btn:not(.sd-btn--primary):hover {
  background: #f5f6f8;
  border-color: #d5dae1;
  color: #1d2129;
}
.sd-btn--primary {
  /* 不用 border:none —— 那样主按钮比次要按钮矮 2px、窄 2px，
     两个按钮并排时一眼能看出不齐。改为同宽透明边框，盒模型保持一致。 */
  border: 1px solid transparent;
  background: linear-gradient(135deg, #096ddd, #49c9e9);
  color: #fff;
}
/* 悬停：只加投影，不动渐变也不动边框色。
   之前那版顺手加深了渐变，配上 border-color 过渡会在边缘露出一圈亮边，
   看着像「边框变色」。 */
.sd-btn--primary:hover {
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(9, 109, 221, 0.3);
}
/* 禁用态（如「已有商家接单，审核中」）：不可点，也不给悬停反馈。 */
.sd-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
}
.sd-btn[disabled]:hover {
  background: #fff;
  border-color: #e5e7eb;
  color: #4b5563;
  box-shadow: none;
}

/* 「我来制作 / 查看产品」在有资格时渲染成 <a>（可右键新标签打开）。
   .sd-btn 原本只为 <button> 写，<a> 需要补齐这些差异：
     - <button> 默认居中文字，<a> 不会 → 用 inline-flex 居中
     - <a> 自带下划线与继承色 → 去掉
     - <button> 的 line-height 与 <a> 不同 → 显式对齐，保证与「关闭」等高 */
a.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  line-height: 1.5;
}
a.sd-btn--primary,
a.sd-btn--primary:hover,
a.sd-btn--primary:focus { color: #fff; text-decoration: none; }

@media (max-width: 768px) {
  .shande-demand-plaza .demand-plaza__left { padding: 20px 16px; }
  .shande-demand-plaza .demand-plaza__header { text-align: center; }
  .shande-demand-plaza .demand-plaza__title { font-size: 18px; }
}


/* ============================================================
   发布需求弹窗（1:1 复刻源码 .demand-modal / .demand-form）
   弹窗由 JS 追加到 body，故为全局类（真实 templates.css 不在 WP 加载，无冲突）
   ============================================================ */
/* 遮罩 / 面板 / 头部的规格已由上方「弹窗统一规格」提供，此处只写发布弹窗特有的部分。
   同样限定在 .demand-modal-overlay 内，避开 user.css 的同名类。 */
.demand-modal-overlay .demand-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px var(--sd-modal-pad, 24px);
}
.demand-form__group { margin-bottom: 18px; }
.demand-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 6px;
}
.demand-form__label .required { color: #096ddd; }
.demand-form__input {
  width: 100%;
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.demand-form__input:focus { border-color: #096ddd; }
.demand-form__textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  resize: vertical;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.demand-form__textarea:focus { border-color: #096ddd; }
.demand-form__select {
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
}
.demand-form__hint { font-size: 11px; color: #a8abb2; }
.demand-form__radios,
.demand-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.demand-form__radios label,
.demand-form__checks label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
}
.demand-form__radios input[type="radio"],
.demand-form__checks input[type="checkbox"] {
  accent-color: #096ddd;
}
.demand-form__upload input[type="file"] { font-size: 13px; }
/* __footer / __submit 是发布弹窗独有的类名（user.css 那套叫 __foot / __btn），
   不存在冲突，保持原样即可。 */
.demand-modal__footer {
  padding: 16px var(--sd-modal-pad, 24px);
  border-top: 1px solid #f1f5f9;
  text-align: center;
}
.demand-modal__submit {
  padding: 10px 40px;
  background: linear-gradient(135deg, #49c9e9, #096ddd);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.demand-modal__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(9, 109, 221, 0.3);
}

/* ============================================================
   弹窗定位加固（含 Elementor 编辑器）
   ------------------------------------------------------------
   弹窗由 JS 挂到 <body>，绝不留在小部件里。原因是 Elementor 容器 .e-con
   自身声明了 position: var(--position)（默认 relative）与 overflow: var(--overflow)，
   开启变换时 .e-con.e-transform 还会带 transform。transform / filter / contain
   任一个都会让该祖先成为 fixed 的包含块，position:fixed 就不再相对视口解算，
   而是相对容器 —— 弹窗因此被容器位置带偏、被 overflow 裁掉。

   挂到 body 已绕开祖先链；这里再用 !important 兜住居中三要素，
   防止主题或插件的全局 [class*="overlay"] 之类规则把它改回去。
   （同样的兜底在 css/demand-plaza.css 里已有一份，但那个文件未被 enqueue。）
   ============================================================ */
body > .sd-modal-overlay,
body > .demand-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* 编辑器面板 z-index 很高，弹窗要压在画布之上但不必盖住编辑器外壳 */
  z-index: 99999;
}

/* 编辑器预览里 body 可能带 padding / transform-style，
   这里确保遮罩不被继承的文本对齐或行高影响内部布局。 */
body > .sd-modal-overlay.sd-in-editor,
body > .demand-modal-overlay.sd-in-editor {
  margin: 0 !important;
  text-align: initial;
}

/* ============================================================
   发布弹窗：输入控件字号统一
   ------------------------------------------------------------
   input / textarea / select 三者原本各写一份 font-size，
   placeholder 又没统一，视觉上「默认文字」大小不一致。
   这里合并成一条：统一 13px / line-height 1.7，
   placeholder 同字号同色，与「详细描述」textarea 完全一致。
   ============================================================ */
.demand-form__input,
.demand-form__textarea,
.demand-form__select {
  font-size: 13px;
  line-height: 1.7;
  font-family: inherit;
  color: #1d2129;
}

.demand-form__input::placeholder,
.demand-form__textarea::placeholder {
  font-size: 13px;
  font-family: inherit;
  color: #a8abb2;
  opacity: 1; /* Firefox 默认给 placeholder 减透明度，显式压平 */
}

.demand-form__select { width: 100%; box-sizing: border-box; background: #fff; }
.demand-form__textarea { min-height: 92px; }

/* 联系方式两个输入框上下排列时的间距 */
.demand-form__input--stack { margin-bottom: 8px; }
.demand-form__hint--inline { margin-left: 8px; font-weight: 400; }

/* 验证码行 */
.demand-form__captcha-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.demand-form__input--captcha { width: 140px; flex: 0 0 140px; }
.demand-captcha {
  background: #f1f5f9;
  padding: 0 16px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #4b5563;
  cursor: pointer;
  user-select: none;
}

/* 同意条款 */
.demand-form__agree {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #86909c;
  cursor: pointer;
  line-height: 1.7;
}
.demand-form__agree input { margin-top: 3px; accent-color: #096ddd; }
.demand-rules-link { color: #096ddd; text-decoration: none; }

/* 提交按钮 loading 态 */
.demand-modal__submit.is-loading { opacity: 0.75; cursor: default; }
/* ============================================================
   发布弹窗：字号分档收口

   上面那条 .demand-form__input/__textarea/__select 已经把「输入值」统一到
   13px，但弹窗里同层级的其它文字各写一份字号，凑在一起仍然参差：
   验证码 15px、上传区提示 13px、同意条款 12px、说明文字 11px。

   这里按语义收成三档，不再逐个控件写：
     输入值 / 选项文字 / 主要说明  13px
     次要说明（hint、tip、上传状态）11px
     占位符 由 shande-base.css 的 0.85em 统一（约 11px），不在此重复
   ============================================================ */
.demand-modal :is(.demand-form__input, .demand-form__textarea, .demand-form__select) {
font-size: 13px;
}
.demand-modal :is(.demand-form__radios, .demand-form__checks) label { font-size: 13px; }
.demand-modal .demand-form__label { font-size: 13px; }
.demand-modal .demand-form__agree { font-size: 12px; }
.demand-modal :is(.demand-form__hint, .demand-upload__tip, .demand-upload__state) { font-size: 11px; }
.demand-modal .demand-upload__text { font-size: 13px; }
/* 验证码原本 15px，比同行的输入框还大一档，视觉上抢过输入值。
   与输入框统一到 13px，仅保留字距和粗体做区分。 */
.demand-modal .demand-captcha { font-size: 13px; }

/* ============================================================
   参考图上传：拖拽区 + 已选列表
   ============================================================ */
.demand-upload__drop {
  border: 1px dashed #d5dae1;
  border-radius: 8px;
  background: #fafbfc;
  padding: 18px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.demand-upload__drop:hover,
.demand-upload__drop:focus-visible {
  border-color: #096ddd;
  background: #f5f9ff;
  outline: none;
}
.demand-upload__drop.is-over { border-color: #096ddd; background: #eef6ff; }
.demand-upload__drop.is-full { opacity: 0.55; cursor: not-allowed; }
.demand-upload__ico { color: #96a1ad; margin-bottom: 6px; }
.demand-upload__text { font-size: 13px; color: #4b5563; }
.demand-upload__text b { color: #096ddd; font-weight: 600; }
.demand-upload__tip { font-size: 11px; color: #a8abb2; margin-top: 4px; }

.demand-upload__list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.demand-upload__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #eef0f2;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}
.demand-upload__item.is-error { border-color: #fecaca; background: #fef8f8; }
.demand-upload__file-ico { color: #96a1ad; flex: 0 0 auto; }
.demand-upload__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1d2129;
}
.demand-upload__size { flex: 0 0 auto; color: #a8abb2; }
.demand-upload__state { flex: 0 0 auto; font-size: 11px; }
.demand-upload__state.is-ok { color: #16a34a; }
.demand-upload__state.is-error { color: #dc2626; }
.demand-upload__state.is-loading { color: #096ddd; }
.demand-upload__del {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #a8abb2;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.demand-upload__del:hover { background: #f5f6f8; color: #dc2626; }

/* ============================================================
   详情弹窗：骨架屏 + 补充信息
   ============================================================ */
@keyframes sdSkShimmer {
  0%   { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}
.sd-skeleton { display: flex; flex-direction: column; gap: 10px; }
.sd-sk {
  border-radius: 6px;
  background: linear-gradient(90deg, #f2f4f6 25%, #e9ecef 37%, #f2f4f6 63%);
  background-size: 840px 100%;
  animation: sdSkShimmer 1.3s ease-in-out infinite;
}
.sd-sk--tag   { width: 72px;  height: 22px; border-radius: 11px; }
.sd-sk--title { width: 78%;   height: 22px; }
.sd-sk--meta  { width: 56%;   height: 14px; }
.sd-sk--label { width: 88px;  height: 14px; margin-top: 8px; }
.sd-sk--line  { width: 100%;  height: 13px; }
.sd-sk--short { width: 62%; }
.sd-sk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.sd-sk--cell { height: 54px; border-radius: 8px; }

.sd-detail__empty {
  padding: 28px 0;
  text-align: center;
  color: #86909c;
  font-size: 13px;
}
.sd-detail__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-detail__chip {
  background: #f1f5f9;
  border-radius: 11px;
  padding: 2px 11px;
  font-size: 12px;
  color: #4b5563;
}
.sd-detail__rows { display: flex; flex-direction: column; gap: 6px; }
.sd-detail__row { display: flex; gap: 10px; font-size: 13px; }
.sd-detail__row span { flex: 0 0 72px; color: #86909c; }
.sd-detail__row b { color: #1d2129; font-weight: 500; }

/* +1 loading 态 */
.demand-card__vote.is-loading { opacity: 0.6; pointer-events: none; }

@media (max-width: 768px) {
  .demand-form__input--captcha { width: 110px; flex: 0 0 110px; }
  .sd-sk-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   热门 / 最新 选项卡
   ------------------------------------------------------------
   两份列表都在服务端渲染，切换只做显隐，所以这里只管选中态样式。
   ============================================================ */
.shande-demand-plaza .demand-plaza__tabs {
  display: flex;
  align-items: center;
  gap: 22px;
}
.shande-demand-plaza .demand-plaza__tab {
  position: relative;
  padding: 0 0 8px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #86909c;
  cursor: pointer;
  transition: color 0.2s;
}
.shande-demand-plaza .demand-plaza__tab:hover { color: #1d2129; }
.shande-demand-plaza .demand-plaza__tab.is-active { color: #1d2129; }
/* 下划线用 ::after，避免选中态改 border 造成 1px 抖动 */
.shande-demand-plaza .demand-plaza__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.2s;
}
.shande-demand-plaza .demand-plaza__tab.is-active::after {
  background: linear-gradient(90deg, var(--gradient-start, #096ddd), var(--gradient-end, #49c9e9));
}
.shande-demand-plaza .demand-plaza__tab:focus-visible {
  outline: 2px solid #096ddd;
  outline-offset: 2px;
}
/* 列表头在有 tab 时底部内边距归零，避免和 tab 的 padding 叠加 */
.shande-demand-plaza .demand-plaza__list-header:has(.demand-plaza__tabs) {
  margin-bottom: 12px;
}

/* 面板：hidden 属性由 JS 切换，这里保证被 display:flex 覆盖时也能收起 */
.shande-demand-plaza .demand-plaza__list[hidden] { display: none; }

.shande-demand-plaza .demand-plaza__empty {
  padding: 32px 0;
  text-align: center;
  font-size: 13px;
  color: #a8abb2;
}

/* ============================================================
   卡片：整卡可点 + 标题下「状态 / 日期」一行
   ------------------------------------------------------------
   原本靠描述里的「查看详情>>」链接进详情，现在整卡可点，
   链接去掉。状态与日期同一行、都靠左。
   ============================================================ */
.shande-demand-plaza .demand-card { cursor: pointer; }
/* 键盘可达：卡片带 tabindex，focus 时给出与 hover 一致的反馈 */
.shande-demand-plaza .demand-card:focus-visible {
  outline: 2px solid #096ddd;
  outline-offset: 2px;
  border-color: #096ddd;
}

/* 状态与日期都靠左，紧挨着排；不撑满整行 */
.shande-demand-plaza .demand-card__meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.5;
}
/* 状态是纯文本，不做徽标：无边框无底色，只靠颜色区分 */
.shande-demand-plaza .demand-card__status {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* 等待制作用橙色、已上架用绿色，与后台列表的状态色一致 */
.shande-demand-plaza .demand-card__status.is-waiting { color: #f59e0b; }
.shande-demand-plaza .demand-card__status.is-online { color: #10b981; }
.shande-demand-plaza .demand-card__date {
  color: #a8abb2;
  white-space: nowrap;
}

/* 描述限两行，避免长描述把卡片撑得过高 */
.shande-demand-plaza .demand-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .shande-demand-plaza .demand-plaza__tabs { gap: 16px; }
  .shande-demand-plaza .demand-plaza__tab { font-size: 14px; }
}

/*
 * 详情弹窗在窄屏收紧：弹窗四边 24px 内边距在 360px 宽的屏上
 * 会把概要栏挤成两列各 60px，数字换行，所以那里改单列。
 */
@media (max-width: 560px) {
  .sd-modal-overlay,
  .demand-modal-overlay { padding: 12px; }
  .sd-modal-overlay { --sd-modal-pad: 16px; }
  /* 单列时不需要列间距，横线本身已经把四项分开 */
  .sd-detail__info { grid-template-columns: 1fr; }
  .sd-detail__info-item:nth-child(odd) { padding-right: 0; }
  .sd-detail__title { font-size: 17px; }
  .sd-detail__actions { flex-direction: column-reverse; align-items: stretch; }
  .sd-detail__actions .sd-btn { width: 100%; justify-content: center; }
  .sd-detail__ref-img { width: 72px; height: 72px; }
  .sd-detail__ref-name { max-width: 140px; }
}