/* =========================================================
 * 加工需求市场 · 样式
 * 独立的零构建 SPA，自带全套视觉，不依赖 site.css。
 * ========================================================= */
:root {
  --mk-primary: #2b6cff;
  --mk-primary-dark: #1a4fd6;
  --mk-danger: #f56c6c;
  --mk-success: #67c23a;
  --mk-warning: #e6a23c;
  --mk-purple: #9c27b0;
  --mk-text: #1f2d3d;
  --mk-sub: #606266;
  --mk-light: #909399;
  --mk-border: #e4e7ed;
  --mk-bg: #f5f6f8;
  --mk-radius: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--mk-bg); color: var(--mk-text); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.mk-wrap { max-width: 1280px; margin: 0 auto; padding: 16px 20px 60px; }

/* 顶栏 */
.mk-topbar {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(135deg, #2b6cff, #1a4fd6);
  color: #fff; padding: 16px 22px; border-radius: var(--mk-radius);
  margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.mk-topbar .brand h1 { font-size: 18px; font-weight: 600; }
.mk-topbar .brand p { font-size: 12px; opacity: .85; margin-top: 3px; }
.mk-auth { display: flex; align-items: center; gap: 10px; }
.mk-auth .who { font-size: 13px; opacity: .92; }
.mk-btn {
  display: inline-block; padding: 8px 18px; border-radius: 6px; font-size: 13px;
  cursor: pointer; border: 1px solid transparent; transition: .2s; font-family: inherit;
  background: #fff; color: var(--mk-primary); font-weight: 500;
}
.mk-btn:hover { background: #f0f6ff; }
.mk-btn.primary { background: var(--mk-primary); color: #fff; }
.mk-btn.primary:hover { background: var(--mk-primary-dark); }
.mk-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.mk-btn.ghost:hover { background: rgba(255,255,255,.12); }
.mk-btn.danger { background: var(--mk-danger); color: #fff; }
.mk-btn.danger:hover { background: #e04b4b; }
.mk-btn.success { background: var(--mk-success); color: #fff; }
.mk-btn.success:hover { background: #5aaf2e; }
.mk-btn.small { padding: 5px 13px; font-size: 12px; }
.mk-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Tabs */
.mk-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.mk-tab {
  padding: 8px 20px; background: #fff; border-radius: 6px; cursor: pointer;
  font-size: 14px; border: 1px solid var(--mk-border); transition: .2s; user-select: none;
}
.mk-tab:hover { color: var(--mk-primary); border-color: var(--mk-primary); }
.mk-tab.active { background: var(--mk-primary); color: #fff; border-color: var(--mk-primary); }
.mk-tab .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mk-danger); margin-left: 5px; vertical-align: middle;
}

/* 卡片容器 */
.mk-card {
  background: #fff; border-radius: var(--mk-radius); padding: 18px 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-bottom: 14px;
}
.mk-card h3 { font-size: 15px; margin-bottom: 14px; padding-left: 10px; border-left: 3px solid var(--mk-primary); }

/* 表单 */
.mk-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.mk-col { flex: 1 1 230px; min-width: 210px; }
.mk-field { margin-bottom: 14px; }
.mk-field label { display: block; font-size: 13px; color: var(--mk-sub); margin-bottom: 6px; }
.mk-field label .req { color: var(--mk-danger); margin-right: 3px; }
.mk-field input, .mk-field select, .mk-field textarea {
  width: 100%; padding: 9px 12px; border: 1px solid #dcdfe6; border-radius: 6px;
  font-size: 14px; outline: none; transition: .2s; background: #fff; color: var(--mk-text); font-family: inherit;
}
.mk-field input:focus, .mk-field select:focus, .mk-field textarea:focus {
  border-color: var(--mk-primary); box-shadow: 0 0 0 2px rgba(43,108,255,.1);
}
.mk-field.invalid input, .mk-field.invalid textarea, .mk-field.invalid select { border-color: var(--mk-danger); }
.mk-field .err-msg { font-size: 12px; color: var(--mk-danger); margin-top: 4px; display: none; }
.mk-field.invalid .err-msg { display: block; }
.mk-field textarea { resize: vertical; min-height: 70px; }
.mk-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* 上传 */
.mk-upload {
  border: 1px dashed #dcdfe6; border-radius: 8px; padding: 14px; text-align: center;
  cursor: pointer; transition: .2s; background: #fafbfc;
}
.mk-upload:hover { border-color: var(--mk-primary); background: #f0f6ff; }
.mk-upload .icon { font-size: 22px; color: var(--mk-primary); }
.mk-upload p { font-size: 13px; color: var(--mk-light); margin-top: 4px; }
.mk-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mk-thumb { position: relative; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; border: 1px solid #ebeef5; background: #f5f7fa; }
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.mk-thumb .del { position: absolute; top: 2px; right: 2px; width: 17px; height: 17px; line-height: 17px; text-align: center; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; font-size: 12px; cursor: pointer; }
.mk-thumb .del:hover { background: var(--mk-danger); }

/* 筛选 */
.mk-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 16px; background: #fafbfc; border-radius: 8px; margin-bottom: 14px; border: 1px solid #f0f2f5; }
.mk-filter input, .mk-filter select { padding: 7px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 13px; outline: none; font-family: inherit; }
.mk-filter input:focus, .mk-filter select:focus { border-color: var(--mk-primary); }
.mk-filter .search { flex: 1; min-width: 180px; }
.mk-filter .pr { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--mk-light); }
.mk-filter .pr input { width: 70px; }

/* 需求卡片 */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.mk-demand {
  background: #fff; border-radius: var(--mk-radius); padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05); display: flex; flex-direction: column;
  border: 1px solid transparent; transition: .2s;
}
.mk-demand:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: #e8eefc; }
.mk-demand .top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 8px; }
.mk-demand .price { color: var(--mk-danger); font-size: 18px; font-weight: 700; }
.mk-demand .price small { font-size: 12px; font-weight: 400; color: var(--mk-light); }
.mk-demand .info { font-size: 13px; color: var(--mk-sub); line-height: 2; margin-bottom: 8px; }
.mk-demand .info span { color: var(--mk-text); }
.mk-demand .imgs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.mk-demand .imgs .mini { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; border: 1px solid #ebeef5; cursor: zoom-in; }
.mk-demand .imgs .more { width: 50px; height: 50px; border-radius: 6px; background: #f5f7fa; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--mk-light); border: 1px solid #ebeef5; }
.mk-demand .acts { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* 状态标签 */
.mk-tag { font-size: 12px; padding: 2px 10px; border-radius: 10px; white-space: nowrap; font-weight: 500; }
.mk-tag.pending { background: #fdf6ec; color: #e6a23c; }
.mk-tag.negotiating { background: #ecf5ff; color: #409eff; }
.mk-tag.accepted { background: #f0f9eb; color: #67c23a; }
.mk-tag.producing { background: #f3e5f5; color: #9c27b0; }
.mk-tag.completed { background: #f4f4f5; color: #909399; }
.mk-tag.cancelled { background: #fef0f0; color: #f56c6c; }

/* 空态 */
.mk-empty { text-align: center; color: var(--mk-light); font-size: 14px; padding: 46px 0; }
.mk-empty .icon { font-size: 38px; opacity: .4; margin-bottom: 8px; }

/* 订单/消息项 */
.mk-item { border: 1px solid #ebeef5; border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; transition: .2s; }
.mk-item:hover { border-color: #d9e3fb; background: #fafcff; }
.mk-item .meta { font-size: 13px; color: var(--mk-sub); line-height: 1.9; flex: 1; min-width: 220px; }
.mk-item .meta b { color: var(--mk-text); font-size: 14px; }
.mk-item .ops { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-badge { display: inline-block; padding: 1px 8px; border-radius: 8px; font-size: 12px; background: #ecf5ff; color: #409eff; }
.mk-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--mk-danger); align-self: center; flex-shrink: 0; }

/* 弹窗 */
.mk-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.mk-mask.show { display: flex; }
.mk-modal { background: #fff; border-radius: var(--mk-radius); width: 560px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.mk-modal.wide { width: 720px; }
.mk-modal .m-head { padding: 14px 20px; border-bottom: 1px solid #ebeef5; display: flex; justify-content: space-between; align-items: center; }
.mk-modal .m-head h4 { font-size: 15px; }
.mk-modal .m-head .close { cursor: pointer; color: var(--mk-light); font-size: 22px; line-height: 1; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.mk-modal .m-head .close:hover { background: #f5f6f8; color: var(--mk-text); }
.mk-modal .m-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.mk-modal .m-foot { padding: 12px 20px; border-top: 1px solid #ebeef5; display: flex; justify-content: flex-end; gap: 8px; }

/* 洽谈 */
.mk-chat { display: flex; flex-direction: column; gap: 10px; min-height: 200px; max-height: 380px; overflow-y: auto; padding: 4px; }
.mk-msg { max-width: 78%; padding: 9px 13px; border-radius: 10px; font-size: 13px; line-height: 1.6; word-break: break-word; }
.mk-msg.me { align-self: flex-end; background: var(--mk-primary); color: #fff; border-bottom-right-radius: 2px; }
.mk-msg.other { align-self: flex-start; background: #f4f4f5; color: var(--mk-text); border-bottom-left-radius: 2px; }
.mk-msg.offer { background: #fff7e6; border: 1px solid #ffd591; color: #d46b08; }
.mk-msg.offer.me { background: #fff7e6; color: #d46b08; }
.mk-msg.offer .price { font-size: 16px; font-weight: 700; }
.mk-msg.system { align-self: center; background: #f4f4f5; color: var(--mk-light); font-size: 12px; max-width: 90%; text-align: center; }
.mk-msg .time { font-size: 11px; opacity: .7; margin-top: 3px; }
.mk-chat-input { display: flex; gap: 8px; margin-top: 12px; }
.mk-chat-input input { flex: 1; padding: 9px 12px; border: 1px solid #dcdfe6; border-radius: 6px; outline: none; font-size: 14px; font-family: inherit; }
.mk-chat-input input:focus { border-color: var(--mk-primary); }

/* 灯箱 */
.mk-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 40px; }
.mk-lightbox.show { display: flex; }
.mk-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.mk-lightbox .close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 32px; cursor: pointer; line-height: 1; }

/* Toast */
.mk-toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-20px); background: #1f2d3d; color: #fff; padding: 10px 22px; border-radius: 6px; font-size: 14px; z-index: 3000; opacity: 0; transition: .25s; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.mk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 详情行 */
.mk-drow { display: flex; padding: 8px 0; border-bottom: 1px dashed #f0f2f5; font-size: 14px; }
.mk-drow .k { width: 84px; color: var(--mk-light); flex-shrink: 0; }
.mk-drow .v { color: var(--mk-text); flex: 1; }
.mk-dimgs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mk-dimgs img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; cursor: zoom-in; border: 1px solid #ebeef5; }

/* 评分 */
.mk-stars { display: flex; gap: 4px; font-size: 26px; cursor: pointer; user-select: none; }
.mk-stars .star { color: #dcdfe6; transition: .15s; }
.mk-stars .star.active { color: #ffb800; }

/* 子标签 */
.mk-subtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.mk-subtab { padding: 6px 16px; font-size: 13px; background: #fff; border: 1px solid var(--mk-border); border-radius: 6px; cursor: pointer; }
.mk-subtab.active { background: var(--mk-primary); color: #fff; border-color: var(--mk-primary); }

/* 响应式 */
@media (max-width: 720px) {
  .mk-wrap { padding: 12px; }
  .mk-grid { grid-template-columns: 1fr; }
  .mk-card { padding: 14px; }
  .mk-modal { width: 100%; }
  .mk-topbar { padding: 14px 16px; }
}