/**
 * V3 各屏**内联样式**的归集。
 *
 * 来源：design/v3/ 那些画稿在 <style> 里就地定义的类（产品缩略图、详情图文块、推荐码二维码、
 * 引流月份与合计行、反馈列表项、结算确认弹窗、两端共用的小件与轻提示）。
 * tokens.css / design.css / pc.css 三份与 design/ 同源复制，本文件是它们的补充，
 * 不含任何新视觉发明 —— 数值一律照抄画稿，改动时回改画稿同处。
 */

/* ===== V3-PC01 产品管理：产品图缩略图与详情图文块 ===== */
.goods-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.goods-cell__pic { width: 40px; height: 40px; flex: none; }
.goods-cell .t { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* 产品表格「每行只占一行」：操作列有 3–4 个方按钮，屏幕窄一点就会换行把行撑高。
   单元格一律不换行，产品名 / 标签放不下就裁切（产品名带省略号），保证行高稳定。 */
.table--goods td { white-space: nowrap; }
.table--goods td .tag-row { flex-wrap: nowrap; overflow: hidden; }
/* 操作列：按钮之间不换行（各页通用，避免多按钮时挤成两行） */
.table td:last-child { white-space: nowrap; }
.thumbs { display: flex; gap: var(--sp-2); }
.thumb {
  width: 76px; height: 76px; flex: none; border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--brand-50), var(--sand-100));
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); color: var(--brand-300);
}
.thumb--title { position: relative; }
.thumb--title::after {
  content: "标题图"; position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(20, 80, 62, .82); color: #fff;
  font-size: var(--fs-micro); text-align: center; line-height: 18px;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.thumb--add { border: 1.5px dashed var(--sand-200); background: var(--surface); color: var(--ink-400); cursor: pointer; }
/* 有图态：占位渐变底让位给图片本身（.pic img 铺满）。不用 overflow:hidden —— 右上角的删除按钮要露在外面 */
.thumb--img { background: var(--sand-100); border: 1px solid var(--sand-200); }
.blocks { display: flex; flex-direction: column; gap: var(--sp-2); }
.block {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--sand-200); border-radius: var(--r-md);
  background: var(--surface);
}
.block__pic { width: 48px; height: 48px; flex: none; border-radius: var(--r-sm); background: var(--sand-100); }
.block__pic--img { border: 1px solid var(--sand-200); }
.block__t { flex: 1; min-width: 0; font-size: var(--fs-caption); color: var(--ink-600); }
.blocks__add { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
/* 文字块：小标题形态（分区标题）与编辑态 */
.block--title { background: var(--sand-100); }
.block__t--title { font-weight: 600; color: var(--ink-900); font-size: var(--fs-body); }
.block--editing { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.ta--block {
  width: 100%; min-height: 72px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--sand-200); border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-caption); color: var(--ink-900); line-height: 1.6;
  resize: vertical; background: var(--surface);
}
.ta--block:focus { outline: none; border-color: var(--brand-600); }
.block__edit-ft { display: flex; align-items: center; gap: var(--sp-3); }
.block__edit-ft .grow { margin-left: auto; }
.block__check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--ink-600); cursor: pointer; }

/* ===== V3-PC03 推荐码：码列与小程序码 ===== */
.code-cell { font-size: var(--fs-body); font-weight: 700; letter-spacing: .04em; }
/* 小程序码缩略图可点放大（hover 描边提示可点） */
.qr-mini--click { cursor: pointer; }
.qr-mini--click:hover { box-shadow: inset 0 0 0 1px var(--brand-600); }
.qr-mini {
  width: 48px; height: 48px; flex: none; border-radius: var(--r-md);
  background: var(--sand-100); display: flex; align-items: center; justify-content: center;
}
.qr-mini__grid {
  width: 34px; height: 34px; border-radius: 4px;
  background: repeating-conic-gradient(var(--brand-400) 0% 25%, transparent 0% 50%) 50% / 8px 8px;
}

/* ===== V3-PC05 引流管理：月份选择与合计行 ===== */
.month {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--sand-200); border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--fs-caption);
}
.month i { font-style: normal; color: var(--ink-400); }
.sum td { background: var(--brand-50); font-weight: 600; border-bottom: none; }
.dlg__q { font-size: var(--fs-heading); font-weight: 600; }

/* ===== V3-PC04 反馈管理：左列表项 ===== */
.msg-item {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border: none; border-bottom: 1px solid var(--line);
  background: var(--surface); font: inherit; cursor: pointer;
}
.msg-item:last-child { border-bottom: none; }
.msg-item--todo { background: #FBF1F0; }
.msg-item--on { background: var(--brand-50); }
.msg-item__t { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-caption); font-weight: 600; }
.msg-item__name { display: inline-flex; align-items: center; gap: 6px; }
.msg-item__rate { margin-top: var(--sp-2); display: flex; align-items: baseline; gap: 6px; }
.msg-item__stars { color: var(--orange); letter-spacing: 1px; font-size: var(--fs-caption); }
.msg-item__score { font-weight: 700; color: var(--ink-900); font-size: var(--fs-caption); }
.msg-item__c { margin-top: var(--sp-1); font-size: var(--fs-caption); color: var(--ink-700); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-item__m { margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--ink-400); }
.dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--danger); }
/* 表格行内的待处理点（订单列表的待发货行）：.dot 在 flex 外用要转行内块 */
.dot--cell { display: inline-block; margin-right: 6px; vertical-align: 2px; }
/* 待处理订单整行铺很浅的红底（盖过斑马纹），与行首红点、菜单角标呼应 */
.table tbody tr.tr--todo,
.table tbody tr:nth-child(even).tr--todo { background: #FBF1F0; }
.score-lab { font-size: var(--fs-caption); color: var(--ink-600); }
.score-lab b { font-size: var(--fs-title); font-weight: 700; color: var(--ink-900); }

/* ===== 两端共用的小件 ===== */
/* .bl = 说明清单（V3-PC05-3 结算确认弹窗），.sm = 小字 */
.bl { margin: 0; padding-left: 18px; }
.bl li { font-size: var(--fs-caption); line-height: 1.9; color: var(--ink-600); }
.bl li b { color: var(--ink-900); }
.sm { font-size: var(--fs-micro); }

/* 顶部轻提示：PC 后台与推荐人网页的操作反馈统一形态 */
.toast {
  position: fixed; left: 50%; top: 24px; transform: translate(-50%, -12px);
  z-index: 40; max-width: 70vw;
  padding: 10px 20px; border-radius: var(--r-pill);
  background: var(--brand-600); color: #fff;
  font-size: var(--fs-caption);
  box-shadow: 0 8px 24px rgba(28, 42, 36, .20);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast--on { opacity: 1; transform: translate(-50%, 0); }
/* 错误态（删除被业务数据挡下等）：红底白字 */
.toast--err { background: #CE6A60; }

/* ===== 整屏应用：去掉设计稿的画板留白 =====
   design.css 的 body 带 `padding: 32px 0` 与桌面色 `#E7E2D8` —— 那是给**画板**用的，
   让 375×812 / 1440×900 的稿件看起来像浮在桌面上的一张图（底部同理）。
   PC 后台与推荐人网页都是整屏应用，不需要这圈留白：不覆盖的话，
   顶栏上方与页面底部会各多出一条底色空白（看着像照抄了设计图里的「电脑窗口顶栏」）。 */
body { padding: 0; background: var(--bg); }

/* ===== 字段的真实控件形态 =====
   画稿里的字段是 div（静态稿），落到可交互页面用 input / textarea / select 时保持同一视觉。 */
input.login-fld, input.input { width: 100%; box-sizing: border-box; font-family: inherit; }
input.login-fld { font-size: var(--fs-body); }
input.input { font-size: var(--fs-caption); }
input.login-fld::placeholder, input.input::placeholder { color: var(--ink-400); }
textarea.textarea-box { width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-caption); color: var(--ink-900); resize: vertical; }
/* V3-PC04 反馈回复框：字号对齐上方患者反馈正文（--fs-body），与患者看到的内容同一行高感；
   已回复态仍可编辑（改动后点「更新回复」覆盖原回复，不新增第二条） */
textarea.textarea-box--fb { font-size: var(--fs-body); line-height: var(--lh-body); }
.input.select, select.input { cursor: pointer; }
select.input { appearance: none; padding-right: var(--sp-5); background-image: none; }

/* ===== V3-W02 推荐人端：顶栏推荐码标签与「一行一项」的特医食品清单 ===== */
.doctor-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-700);
  font-size: var(--fs-micro); font-weight: 600;
}
.meds { display: flex; flex-direction: column; gap: var(--sp-2); }
.med { display: flex; align-items: center; gap: var(--sp-3); }
.med .input { flex: 1; }
.med .input--qty { flex: none; width: 72px; justify-content: center; }
.med .link { flex: none; font-size: var(--fs-caption); }

/* ===== 筛选区里的真实控件 =====
   画稿上的 chip 是静态的；落到可交互页面，分类 / 状态下拉与模糊查询输入做成同一形态。 */
.chip-select {
  height: 34px; padding: 0 30px 0 var(--sp-3); font-family: inherit;
  border-radius: var(--r-pill); border: 1px solid var(--sand-200);
  background: var(--surface); font-size: var(--fs-caption); color: var(--ink-600);
  /* 原生箭头由浏览器画在贴边位置且无法内移：去掉默认外观，用背景图自绘下箭头（距右边 10px，离开边框） */
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
.chip-input {
  height: 34px; padding: 0 var(--sp-4); width: 200px; font-family: inherit;
  border-radius: var(--r-pill); border: 1px solid var(--sand-200);
  background: var(--surface); font-size: var(--fs-caption); color: var(--ink-900);
}
.chip-input--date { width: 150px; }
.chip-input::placeholder { color: var(--ink-400); }
.filters .chip { cursor: pointer; }

/* 发货单已选：文件区显示文件名 */
.up__box.on-file { color: var(--ink-900); }
/* 发货单已选：整块变成图片预览（contain 完整显示单据，别裁掉运单号）。
   有图后边框退回细实线浅色 —— 虚线是「待上传」的信号，传完就不该再提示了。 */
.up__box--img { padding: 0; border-style: solid; border-width: 1px; border-color: var(--line); }
.up__box--img img { width: 100%; height: 158px; object-fit: contain; background: var(--sand-100); border-radius: var(--r-md); }

/* ===== 修改密码弹窗（PC 后台 / 推荐人端共用）：手机窄屏自适应 ===== */
.pwd-dlg { max-width: calc(100vw - 32px); }