/* ============================================================
   双平台商家后台 · 公共样式
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
  background: #f5f6f7;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
ul { list-style: none; }

/* ---------- 顶部栏 ---------- */
#app-header {
  position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 100;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: #fff; border-bottom: 1px solid #e8e8e8;
}
#app-header .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
#app-header .brand-sub { font-size: 13px; color: #888; font-weight: 400; }
#app-header .header-spacer { flex: 1; }
#app-header .header-link {
  font-size: 13px; color: #666; padding: 6px 10px; border-radius: 4px; cursor: pointer;
}
#app-header .header-link:hover { background: #f3f4f6; color: #333; }
#app-header .header-search {
  display: flex; align-items: center; background: #f3f4f6; border-radius: 18px; padding: 5px 12px;
}
#app-header .header-search input {
  border: none; outline: none; background: transparent; font-size: 13px; width: 140px;
}

/* 平台主题色 */
.tb #app-header .brand { color: #ff6a00; }
.pdd #app-header .brand { color: #e02e24; }
.pdd #app-header .brand .dot { color: #e02e24; }

/* ---------- 左侧菜单 ---------- */
#app-aside {
  position: fixed; top: 56px; left: 0; bottom: 0; width: 200px; z-index: 90;
  background: #fff; border-right: 1px solid #e8e8e8; overflow-y: auto;
}
#app-aside .menu-group { padding: 12px 0; }
#app-aside .menu-group-title {
  font-size: 12px; color: #999; padding: 4px 20px;
}
#app-aside .menu-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 14px;
  color: #444; cursor: pointer; border-left: 3px solid transparent;
}
#app-aside .menu-item:hover { background: #f5f6f7; }
#app-aside .menu-item.active {
  background: #fff7f0; color: #ff6a00; font-weight: 600; border-left-color: #ff6a00;
}
.pdd #app-aside .menu-item.active { background: #fdf0ef; color: #e02e24; border-left-color: #e02e24; }
#app-aside .menu-item .ico {
  width: 20px; text-align: center; color: #999; font-size: 15px;
}
#app-aside .menu-item.active .ico { color: inherit; }

/* ---------- 内容区 ---------- */
.page-main { margin-left: 200px; margin-top: 56px; padding: 8px 16px 40px; min-height: calc(100vh - 56px); background: #f5f6f7; }
.page-main.full { margin-left: 200px; }

/* ---------- 顶部标签页 ---------- */
.tabs { display: flex; align-items: center; gap: 4px; margin: 10px 0 0; }
.tabs .tab {
  padding: 10px 16px; cursor: pointer; color: #444; font-size: 14px; border-bottom: 2px solid transparent;
}
.tabs .tab:hover { color: #ff6a00; }
.tabs .tab.active { color: #ff6a00; font-weight: 600; border-bottom-color: #ff6a00; }
.pdd .tabs .tab.active { color: #e02e24; border-bottom-color: #e02e24; }
.tabs .tab .cnt { color: #999; font-size: 13px; }

/* ---------- 筛选区 ---------- */
.filter-card {
  background: #fff; border: 1px solid #e8e8e8; border-radius: 4px; padding: 14px 16px; margin-top: 12px;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; }
.field label { white-space: nowrap; }
.field input, .field select {
  height: 32px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 10px;
  font-size: 13px; outline: none; min-width: 120px; background: #fff; color: #333;
}
.field input:focus, .field select:focus { border-color: #ff6a00; }
.pdd .field input:focus, .pdd .field select:focus { border-color: #e02e24; }
.field .range {
  display: inline-flex; align-items: center; gap: 6px;
}
.field .range input { width: 96px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 32px; padding: 0 16px; font-size: 13px; border-radius: 4px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: #ff6a00; color: #fff; border-color: #ff6a00; }
.btn-primary:hover { opacity: .9; }
.pdd .btn-primary { background: #e02e24; border-color: #e02e24; }
.btn-plain { background: #fff; color: #333; border-color: #dcdfe6; }
.btn-plain:hover { border-color: #ff6a00; color: #ff6a00; }
.pdd .btn-plain:hover { border-color: #e02e24; color: #e02e24; }
.btn-plain.is-active { color: #fff; background: #e02e24; border-color: #e02e24; }
.btn-link { background: none; border: none; color: #1677ff; cursor: pointer; font-size: 13px; padding: 0; }
.btn-link:hover { text-decoration: underline; }
.btn-link.orange { color: #ff6a00; }
.pdd .btn-link.orange { color: #e02e24; }
.btn-ghost { border: 1px solid #dcdfe6; background: #fff; color: #333; }
.btn-ghost:hover { color: #ff6a00; border-color: #ff6a00; }

/* ---------- 卡片 ---------- */
.card { background: #fff; border: 1px solid #e8e8e8; border-radius: 4px; }
.card .card-hd {
  padding: 12px 16px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center;
  justify-content: space-between; font-weight: 600;
}

/* ---------- 表格 ---------- */
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { padding: 10px 12px; font-size: 13px; text-align: left; border-bottom: 1px solid #f0f0f0; }
.table th { background: #fafafa; color: #666; font-weight: 600; white-space: nowrap; }
.table tr:hover td { background: #fafcff; }
.table .num { text-align: right; }
.table .link { color: #1677ff; cursor: pointer; }
.table .link:hover { text-decoration: underline; }
.table .link.orange { color: #ff6a00; }
.pdd .table .link.orange { color: #e02e24; }

/* ---------- 状态标签 ---------- */
.tag { display: inline-block; padding: 1px 8px; font-size: 12px; border-radius: 3px; }
.tag.blue { color: #1677ff; background: #e8f1ff; }
.tag.green { color: #16a34a; background: #e6f7ec; }
.tag.orange { color: #ff6a00; background: #fff2e8; }
.pdd .tag.orange { color: #e02e24; background: #fdeceb; }
.tag.gray { color: #888; background: #f0f0f0; }
.tag.red { color: #e02e24; background: #fdeceb; }

/* ---------- 弹窗（处方详情） ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.modal-box { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 30px rgba(0,0,0,.15); }
.modal-hd {
  padding: 12px 16px; border-bottom: 1px solid #eee; display: flex; align-items: center;
  justify-content: space-between; font-weight: 600; font-size: 14px;
}
.modal-close { cursor: pointer; color: #999; font-size: 18px; line-height: 1; }
.modal-close:hover { color: #333; }
.modal-bd { padding: 16px; }

/* 详情条目（处方详情里的两列信息） */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #eee; }
.detail-grid .cell {
  display: flex; border-bottom: 1px solid #eee; font-size: 13px;
}
.detail-grid .cell:nth-child(odd) { border-right: 1px solid #eee; }
.detail-grid .cell .k {
  width: 140px; flex-shrink: 0; background: #fafafa; color: #666; padding: 9px 12px; border-right: 1px solid #eee;
}
.detail-grid .cell .v { flex: 1; padding: 9px 12px; color: #333; min-height: 36px; }

/* RP 区域 */
.rp-area { margin-top: 14px; }
.rp-title { font-size: 16px; font-weight: 800; letter-spacing: 2px; color: #111; margin-bottom: 8px; }
.rp-table { width: 100%; border-collapse: collapse; }
.rp-table th, .rp-table td { padding: 8px 10px; font-size: 13px; border: 1px solid #e5e7eb; text-align: left; }
.rp-table th { background: #fafafa; color: #555; font-weight: 600; }
.rp-hint { color: #999; font-size: 12px; margin-top: 8px; }

/* ---------- 物流时间轴 ---------- */
.timeline { position: relative; padding-left: 20px; }
.timeline .tl-item { position: relative; padding: 0 0 22px 16px; }
.timeline .tl-item::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: #cbd5e1; box-shadow: 0 0 0 3px #eef2f7;
}
.timeline .tl-item:first-child::before { background: #16a34a; box-shadow: 0 0 0 3px #e6f7ec; }
.timeline .tl-item:last-child::after {
  content: ""; position: absolute; left: 4px; top: 16px; bottom: -2px; width: 1px; background: #e2e8f0;
}
.timeline .tl-item .tl-time { font-size: 12px; color: #888; }
.timeline .tl-item .tl-desc { font-size: 13px; color: #333; margin-top: 3px; line-height: 1.6; }
.timeline .tl-item:first-child .tl-desc { color: #16a34a; }

/* ---------- 处方图片预览 ---------- */
.preview-wrap { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 1200; display: none; align-items: center; justify-content: center; }
.preview-wrap.show { display: flex; }
.preview-wrap img { max-width: 80%; max-height: 80%; border-radius: 6px; cursor: zoom-out; }

/* ---------- 订单（拼多多）卡片列表 ---------- */
.order-card { background: #fff; border: 1px solid #e8e8e8; margin-bottom: 12px; }
.order-card .oc-top {
  display: flex; align-items: center; gap: 16px; padding: 9px 12px; border-bottom: 1px solid #f0f0f0;
  font-size: 12px; color: #666; flex-wrap: wrap;
}
.order-card .oc-top .gap { color: #e02e24; }
.order-card .oc-top .rt { margin-left: auto; display: flex; gap: 16px; }
.order-card .oc-top .refund-btn { color: #e02e24; cursor: pointer; }
.order-card .oc-body { display: flex; padding: 12px; gap: 12px; }
.order-card .oc-img { width: 64px; height: 64px; border-radius: 4px; flex-shrink: 0; }
.order-card .oc-main { flex: 1; min-width: 0; }
.order-card .oc-title { font-size: 13px; color: #333; line-height: 1.5; }
.order-card .oc-no { margin-top: 6px; font-size: 12px; color: #666; }
.order-card .oc-col { width: 90px; flex-shrink: 0; border-left: 1px solid #f0f0f0; padding-left: 12px; font-size: 13px; }
.order-card .oc-col.label { color: #999; font-size: 12px; }
.order-card .oc-col.amount { color: #e02e24; font-weight: 600; }
.order-card .oc-col.center { text-align: center; }
.order-card .oc-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* ---------- 图片放大预览缩略图 ---------- */
.thumb-row { display: flex; gap: 16px; margin-top: 12px; }
.thumb-row .thumb { width: 180px; border: 1px solid #e2e8f0; border-radius: 4px; overflow: hidden; cursor: zoom-in; text-align: center; }
.thumb-row .thumb img { width: 100%; }

/* ---------- 工具条 / 分页 ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 16px; color: #666; font-size: 13px; }
.pager .pg { border: 1px solid #dcdfe6; background: #fff; padding: 4px 10px; border-radius: 3px; cursor: pointer; }
.pager .pg.on { color: #e02e24; border-color: #e02e24; }
.pager .pg.dis { color: #ccc; cursor: not-allowed; }

/* ---------- 底部提示 ---------- */
.hint-line { font-size: 12px; color: #999; margin: 10px 2px; }
.dim { color: #aaa; }
.muted { color: #999; }

/* 返回平台首页的固定悬浮按钮（右下角） */
.home-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  background: rgba(0,0,0,.65); color: #fff; font-size: 13px; padding: 9px 14px;
  border-radius: 20px; cursor: pointer;
}
.home-fab:hover { background: rgba(0,0,0,.82); }