/* 结算结账系统前端样式 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #2f7cf6; --primary-d: #1f62cc; --bg: #f2f4f8; --card: #fff;
  --text: #1c2430; --muted: #6b7688; --line: #e3e8f0;
  --red: #e43d3d; --green: #18a05a; --orange: #e8952d; --gray: #a0a9b8;
  --tag-blue-bg: #e7f0fe; --tag-blue: #2f7cf6;
  --tag-orange-bg: #fff3e0; --tag-orange: #e8952d;
  --tag-red-bg: #fdeaea; --tag-red: #e43d3d;
}
body { font-family: "PingFang SC","Microsoft YaHei",-apple-system,sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* 顶栏 */
.app { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 60px; }
.topbar { background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 56px; }
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.badge { background: #2f7cf6; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 6px; font-weight: 500; vertical-align: middle; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-label { font-size: 13px; color: var(--muted); }
.topbar-user { font-size: 13px; color: var(--text); }
.topbar-user b { color: var(--primary-d); margin-left: 4px; }
.topbar-role { font-size: 12px; color: #fff; background: #18a05a; padding: 3px 10px; border-radius: 10px; }

/* 平台 Tab + 日期行 */
.subnav { background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 48px; }
.plat-tabs { display: flex; gap: 4px; align-items: center; }
.plat-tab { padding: 6px 16px; border-radius: 8px; color: var(--text); font-size: 14px; cursor: pointer; user-select: none; }
.plat-tab:hover { background: #eef3fc; }
.plat-tab.active { background: var(--primary); color: #fff; font-weight: 600; }
.plat-tab.disabled { color: var(--muted); cursor: not-allowed; }
.plat-add { margin-left: 8px; color: var(--muted); border: 1px dashed var(--line); }
.plat-add:hover { background: #eef3fc; color: var(--primary); border-color: var(--primary); }
.plat-tab-del { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 50%; background: rgba(255,255,255,.3); color: #fff; font-size: 12px; line-height: 16px; cursor: pointer; }
.plat-tab:not(.active) .plat-tab-del { background: rgba(0,0,0,.08); color: var(--muted); }
.plat-tab-del:hover { background: #ef4444 !important; color: #fff !important; }

/* 解析表中的平台徽章 */
.plat-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.plat-badge.plat-mt { background: #eff6ff; color: #2563eb; }
.plat-badge.plat-jd { background: #fee2e2; color: #dc2626; }
.plat-badge.plat-tb { background: #ffedd5; color: #f97316; }
.plat-badge.plat-other { background: #f3f4f6; color: #6b7280; }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input { width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; box-sizing: border-box; }
.ap-err { color: var(--red); font-size: 12px; min-height: 18px; margin: 6px 0; }
.date-row { display: flex; align-items: center; gap: 8px; }
.date-row input[type=date] { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }

/* 4 列布局（粘贴 | 解析 | 预览 | 退款，列2=列4 等宽弹性） */
.content { max-width: 1680px; width: 100%; margin: 0 auto; padding: 20px; flex: 1; }
.paste-layout { display: grid; grid-template-columns: 220px 1fr 600px; gap: 16px; align-items: start; }
.paste-layout .card { margin: 0; }
@media (max-width: 1400px) { .paste-layout { grid-template-columns: 200px 1fr 520px; } }
@media (max-width: 1100px) { .paste-layout { grid-template-columns: 1fr 1fr; } }

/* 卡片基础 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.card h3 { font-size: 15px; margin-bottom: 12px; font-weight: 600; }
.card h3 .count { color: var(--muted); font-weight: normal; font-size: 13px; margin-left: 4px; }

/* 左列：粘贴区 */
.paste-card .field { margin-bottom: 10px; }
.paste-card label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.paste-card input, .paste-card select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.paste-card textarea { width: 100%; min-height: 220px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-size: 13px; resize: vertical; font-family: "Consolas","Microsoft YaHei",monospace; }
.paste-card .btn-row { display: flex; gap: 8px; margin-top: 12px; }
.paste-card .hint-text { color: var(--muted); font-size: 12px; margin-top: 14px; line-height: 1.7; }

/* 左列底部：美团退款控件 */
.refund-control { margin-top: 16px; padding: 12px; border: 1px solid #ffe3d0; border-radius: 8px; background: #fffaf5; }
.refund-control .rc-label { font-size: 13px; font-weight: 700; color: #e8590c; margin-bottom: 8px; }
.refund-control .rc-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin-bottom: 8px; }
.refund-control .rc-check input { width: auto; }
.refund-control .rc-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.refund-control .rc-row label { display: block; font-size: 12px; color: var(--muted); margin: 0; min-width: 40px; }
.refund-control .rc-row select, .refund-control .rc-row input { flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.refund-control .rc-btn { width: 100%; padding: 6px; border: none; border-radius: 6px; background: #e8590c; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.refund-control .rc-btn:disabled { background: #ccc; cursor: not-allowed; }
.refund-control .rc-btn-manual { background: #f59e0b; margin-top: 6px; }
.refund-control .rc-manual-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding: 8px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; }
.refund-control .rc-manual-tip { font-size: 12px; color: #92400e; font-weight: 600; }
.refund-control .rc-manual-item { flex: 1; min-width: 100px; padding: 5px 8px; border: 1px solid #fbbf24; border-radius: 4px; font-size: 12px; }
.refund-control .rc-manual-price-label { font-size: 11px; color: #92400e; }
.refund-control .rc-manual-price { width: 70px; padding: 5px 8px; border: 1px solid #fbbf24; border-radius: 4px; font-size: 12px; }
.refund-control .rc-manual-ok { padding: 5px 10px; border: none; border-radius: 4px; background: #10b981; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.refund-control .rc-manual-cancel { padding: 5px 10px; border: none; border-radius: 4px; background: #e5e7eb; color: #475569; font-size: 12px; cursor: pointer; }
.refund-control .rc-tip { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* 手动添加退款 tag（v576） */
.refund-card .r-tag.tag-manual { background: #dbeafe; color: #1d4ed8; border: 1px dashed #3b82f6; }

/* 第 4 列：退款解析 */
.refund-card .refund-head { display: flex; justify-content: space-between; align-items: center; }
.refund-card .refund-head .count { color: #e8590c; font-weight: 700; }
.refund-card .refund-source { font-family: Consolas, monospace; font-size: 11px; color: var(--muted); background: #f5f6f8; padding: 2px 6px; border-radius: 4px; }
.refund-card .refund-meta { background: #fffaf5; border: 1px solid #ffe3d0; border-radius: 6px; padding: 8px 10px; font-size: 11px; color: #8c6a52; line-height: 1.6; margin: 10px 0; }
.refund-card .refund-meta strong { color: #e8590c; }
.refund-card .refund-meta code { background: #fff; padding: 0 3px; border-radius: 3px; font-family: Consolas, monospace; font-size: 10px; }
.refund-card .refund-filter { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.refund-card .refund-filter label { font-size: 12px; color: var(--muted); }
.refund-card .refund-filter select { flex: 1; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.refund-card table { width: 100%; border-collapse: collapse; font-size: 12px; }
.refund-card th, .refund-card td { padding: 7px 5px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.refund-card th { background: #f7f9fc; color: var(--muted); font-weight: 600; font-size: 11px; }
.refund-card td.num, .refund-card th.num { text-align: right; }
.refund-card .order-cell { font-family: Consolas, monospace; font-size: 11px; color: var(--muted); }
.refund-card .name-cell { font-weight: 500; }
.refund-card .refund-summary { display: flex; justify-content: space-between; padding: 10px 4px 0; font-size: 13px; border-top: 1px dashed var(--line); margin-top: 8px; }
.refund-card .refund-summary .r-count { color: var(--muted); }
.refund-card .refund-summary .r-total { color: #e8590c; font-weight: 700; font-size: 14px; }
.refund-card .refund-empty { color: var(--muted); font-size: 12px; padding: 24px 0; text-align: center; }

/* 退款标记（复用销售表 tag 色系） */
.tag-group { background: #fff0e6; color: #e8590c; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.tag-base { background: #e8f0fe; color: #2f7cf6; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.tag-zero { background: #ffe6e6; color: #e43d3d; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.tag-new { background: #f6ffed; color: #52c41a; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }

/* 中列：解析表 */
.parsed-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.parsed-card th, .parsed-card td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.parsed-card th { background: #f7f9fc; color: var(--muted); font-weight: 600; font-size: 12px; }
.parsed-card td.num, .parsed-card th.num { text-align: right; }
.parsed-card .idx { color: var(--muted); }
.parsed-card .qty-input, .parsed-card .price-input { width: 26px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; text-align: right; }
.cell-input { width: 26px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; text-align: right; background: #fffaf5; }
.refund-card .cell-input { width: 23px; padding: 3px 4px; font-size: 12px; }
.refund-card .cell-input-item { width: 100%; min-width: 70px; padding: 3px 6px; font-size: 12px; text-align: left; }
.refund-card .cell-input-order { width: 100%; min-width: 100px; padding: 3px 6px; font-size: 11px; text-align: left; font-family: Consolas, monospace; }
.parsed-card .qty-input { width: 50px; }
.parsed-card .new-price { width: 26px; padding: 4px 6px; border: 1px solid var(--orange); border-radius: 4px; font-size: 13px; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
.parsed-card .subtotal { font-weight: 600; }
.parsed-card .base-price-cell { color: var(--muted); font-size: 12px; }
.base-price-cell .base-edit-btn {
  display: inline-block;
  margin-left: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  transition: all .15s;
}
.base-price-cell .base-edit-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: scale(1.1);
}
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-row { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: all .15s; }
.radio-row:hover { border-color: var(--primary); background: #f5f9ff; }
.radio-row input[type=radio] { margin-top: 3px; }
.radio-row span { flex: 1; line-height: 1.5; }
.radio-row b { color: var(--text); }
.parsed-card .tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.parsed-card .tag.base { background: var(--tag-blue-bg); color: var(--tag-blue); }
.parsed-card .tag.changed { background: var(--tag-red-bg); color: var(--tag-red); }
.parsed-card .tag.new { background: var(--tag-orange-bg); color: var(--tag-orange); }
.parsed-card .tag.zero { background: var(--tag-red-bg); color: var(--tag-red); }
.parsed-card .tag.group { background: var(--tag-orange-bg); color: var(--tag-orange); }
.parsed-card .row-del { background: none; border: none; color: var(--red); cursor: pointer; font-size: 16px; padding: 0 6px; }
.parsed-card .row-del:hover { color: #b71c1c; }
.parsed-card .summary { display: flex; justify-content: flex-start; gap: 16px; padding: 12px 4px 8px; font-size: 14px; border-top: 2px solid var(--line); margin-top: 8px; flex-wrap: wrap; }
.parsed-card .p-refund-row { color: #e8590c; }
.parsed-card .p-net-row { color: #e43d3d; font-weight: 700; }
.refund-buttons { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; position: relative; }
.parsed-card .summary .total-amount { color: var(--red); font-size: 16px; font-weight: 700; }
.parsed-card .confirm-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.parsed-card .btn-confirm { padding: 8px 24px; font-size: 14px; font-weight: 600; }
.empty-row { text-align: center; color: var(--muted); padding: 30px 0; font-size: 13px; }

/* 右列：结算单预览 */
.preview-card { padding: 18px; }
.preview-headline { padding: 8px 0 16px; border-bottom: 1px dashed var(--line); margin-bottom: 12px; }
.preview-date { color: var(--red); font-size: 14px; font-weight: 600; }
.preview-group { color: var(--red); font-size: 28px; font-weight: 800; margin: 4px 0; }
.preview-amount { color: var(--red); font-size: 24px; font-weight: 800; }
.preview-card table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.preview-card th, .preview-card td { padding: 7px 4px; border-bottom: 1px solid #f0f2f5; text-align: left; }
.preview-card th { color: var(--muted); font-size: 12px; font-weight: 500; }
.preview-card td.num, .preview-card th.num { text-align: right; }
.preview-card .price-red { color: var(--red); font-weight: 600; }
.preview-footer { padding: 10px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.preview-footer .red-text { color: var(--red); font-weight: 600; }
.preview-footer .pf-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; color: var(--muted); }
.preview-footer .pf-refund { color: #e8590c; }
.preview-footer .pf-net { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; color: #e43d3d; font-weight: 700; font-size: 16px; }
.preview-buttons { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.preview-buttons .btn { flex: 1; padding: 8px 12px; font-size: 13px; }

/* 图片导出显示区 */
.img-export-area { margin-top: 14px; padding: 12px; background: #f8fafc; border: 1px dashed var(--line); border-radius: 8px; }
.img-area-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.img-area-header .hint { margin: 0; }
.img-preview { width: 100%; border-radius: 6px; display: block; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.img-area-footer { margin-top: 8px; text-align: center; }

/* 底部导航 */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); display: flex; justify-content: center; gap: 8px; padding: 8px 16px; z-index: 50; box-shadow: 0 -2px 10px rgba(0,0,0,.04); }
.bottom-nav a { padding: 8px 18px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13px; white-space: nowrap; cursor: pointer; user-select: none; }
.bottom-nav a:hover { background: #eef3fc; }
.bottom-nav a.active { background: var(--primary); color: #fff; font-weight: 600; }

/* 通用工具条（其他 tab 页面用） */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input, .toolbar select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.toolbar .spacer { flex: 1; }

/* 按钮 */
.btn { border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; background: #eef1f6; color: var(--text); }
.btn:hover { background: #e2e7ef; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-d); }
.btn.danger { background: #fbebeb; color: var(--red); }
.btn.danger:hover { background: #f7d8d8; }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 表格 */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { background: #f7f9fc; color: var(--muted); font-weight: 600; }
tr:hover td { background: #fafcff; }
td.num, th.num { text-align: right; }
.badge-status { padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.badge-status.mt { background: #fff4db; color: #b37400; }
.badge-status.jd { background: #fdeaea; color: #e43d3d; }
.badge-status.tb { background: #fff0e6; color: #ff6f00; }

/* 价格 0 警示 */
.price-zero { color: var(--red); font-weight: 700; background: #fdeaea; border-radius: 4px; padding: 1px 6px; }
.price-warn { border: 2px solid var(--red) !important; background: #fdeaea !important; }

/* v670.16: 结算区「未录价」行整行醒目红 + 左侧粗红竖条（有基准价跟着基准价走的行不标） */
.parsed-card tbody tr.row-zero {
  background: #ff5252 !important;
  box-shadow: inset 8px 0 0 0 #b71c1c;
}
.parsed-card tbody tr.row-zero:hover { background: #e53935 !important; }
.parsed-card tbody tr.row-zero .price-zero { background: #e11d48; color: #fff; }

/* v670.16: 退款区「未填单价」行整行醒目红(与结算区同规则:正红 + 左侧粗红条) */
.refund-block tbody tr.row-zero { background: #ff5252 !important; box-shadow: inset 8px 0 0 0 #b71c1c; }
.refund-block tbody tr.row-zero:hover { background: #e53935 !important; }
/* v670.16 修复: 红行里普通文字白字粗体可读;输入框反白(白底深字)既醒目又能正常输入 */
.refund-block tbody tr.row-zero td { color: #fff !important; font-weight: 600; }
.refund-block tbody tr.row-zero .r-unitprice { color: #fff !important; }
.refund-block tbody tr.row-zero .cell-input { background: #fff !important; color: #1c2430 !important; font-weight: 500; }

/* 摘要卡片 */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.stat-card .label { font-size: 12px; color: var(--muted); }
.stat-card .value { font-size: 24px; font-weight: 700; margin-top: 6px; }
.stat-card .value.red { color: var(--red); }
.stat-card .value.green { color: var(--green); }
.stat-card .value.blue { color: var(--primary); }

/* 表格滚动 */
.table-scroll { overflow-x: auto; }

/* 弹窗 */
.mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto; }
.modal { background: #fff; border-radius: 12px; padding: 22px; width: 680px; max-width: 100%; }
.modal h3 { margin-bottom: 16px; }
.modal .row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.modal .row label { width: 90px; color: var(--muted); font-size: 13px; }
.modal input, .modal select, .modal textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; flex: 1; min-width: 120px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal-box { background: #fff; border-radius: 10px; padding: 20px 24px; min-width: 320px; max-width: 480px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal-box h3 { margin: 0 0 12px; font-size: 18px; color: var(--text); }

/* 表单网格 */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }
.form-grid .field { display: flex; flex-direction: column; }
.form-grid label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.form-grid input, .form-grid select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }

/* 群跟随勾选行 */
.follow-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid var(--line); }
.follow-row label { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.follow-row input[type=number] { width: 90px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }

/* 提示 */
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.notice { background: #eef6ff; border: 1px solid #ccdefa; color: #1f5cb8; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.notice.warn { background: #fff7e8; border-color: #f6dfae; color: #a86a12; }

.empty { text-align: center; color: var(--muted); padding: 30px 0; font-size: 13px; }

@media (max-width: 1100px) {
  .paste-layout { grid-template-columns: 1fr 1fr; }
  .preview-card { grid-column: span 2; }
}
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 10px; gap: 8px; }
  .subnav { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; }
  .paste-layout { grid-template-columns: 1fr; }
  .preview-card { grid-column: auto; }
  .bottom-nav { overflow-x: auto; justify-content: flex-start; }
}

/* ===== 京东/淘宝页 ===== */
.jd-page { padding: 16px 0; }
.jd-page .plat-tabs { margin: 0 0 16px 4px; }
.jd-layout { display: grid; grid-template-columns: 300px 1fr 340px; gap: 16px; align-items: start; }
.jd-layout .card { margin: 0; }
@media (max-width: 1200px) { .jd-layout { grid-template-columns: 1fr 1fr; } .jd-layout .preview-card { grid-column: span 2; } }
@media (max-width: 800px) { .jd-layout { grid-template-columns: 1fr; } .jd-layout .preview-card { grid-column: auto; } }
.jd-cal { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 10px 0; }
.jd-cal-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.jd-cal-head .nav { cursor: pointer; padding: 0 10px; color: var(--muted); user-select: none; font-size: 16px; }
.jd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jd-day { text-align: center; padding: 6px 0; border-radius: 6px; font-size: 13px; cursor: pointer; border: 1px solid transparent; }
.jd-day:hover { background: #eef3fc; }
.jd-day.sel { background: var(--primary); color: #fff; font-weight: 600; }
.jd-selinfo { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.jd-jump { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.jd-jump h4 { font-size: 13px; margin-bottom: 8px; color: var(--muted); font-weight: 600; }
.jd-jump-row { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.jd-jump-row .jsub { color: var(--text); flex: 1; }
.jd-jump-row .jcol { color: var(--muted); font-size: 11px; }
.jd-jump-row .jqty { color: var(--text); font-weight: 600; }
.jd-jump-row .jtag { background: #fff7e6; color: var(--orange); padding: 1px 6px; border-radius: 3px; font-size: 11px; white-space: nowrap; }
.jd-jump-row .jbtn { border: 1px solid var(--primary); color: var(--primary); background: #fff; border-radius: 6px; padding: 3px 8px; font-size: 12px; white-space: nowrap; }
.jd-status { font-size: 12px; color: var(--green); margin: 8px 0; line-height: 1.6; }
.jd-hint { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.jd-pending { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.jd-pending-head { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.jd-pending-loading, .jd-pending-empty { font-size: 12px; color: var(--muted); padding: 6px 2px; }
.jd-pending-empty { color: #b45309; }
.jd-pending-person { margin-bottom: 8px; }
.jd-pending-person .jdp-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.jd-pending-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 6px; border-radius: 6px; margin-bottom: 3px; background: #fff7ed; border: 1px solid #fed7aa; }
.jd-pending-row.settled { background: #f4f6f8; border-color: var(--line); opacity: 0.7; }
.jd-pending-row .jdp-group { font-weight: 600; color: var(--text); }
.jd-pending-row .jdp-qty { color: var(--muted); }
.jd-pending-row .jdp-status { color: #b45309; font-weight: 600; }
.jd-pending-row.settled .jdp-status { color: var(--green); }
.jd-pending-row .jdp-go { margin-left: auto; background: #ffffff; color: #dc2626; border: 2px solid #dc2626; border-radius: 6px; padding: 6px 16px; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 1px 4px rgba(220,38,38,0.25); }
.jd-pending-row .jdp-go:hover { background: #dc2626; color: #ffffff; }
.sel-person { font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); }
.jd-big { display: flex; align-items: baseline; gap: 12px; padding: 8px 0 12px; border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
.jd-big .grp { color: var(--red); font-size: 30px; font-weight: 800; }
.jd-big .amt { color: var(--red); font-size: 22px; font-weight: 800; }
.jd-recorded { display: inline-block; background: #e8f7ee; color: var(--green); font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-bottom: 8px; }
.parsed-card .cell-input { width: 56px; padding: 3px 4px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; }

.topbar-left { display: flex; align-items: center; gap: 16px; }

.jd-links { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.jd-links h4 { font-size: 13px; margin-bottom: 8px; color: var(--muted); font-weight: 600; }
.jd-link-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.jd-link-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 6px; background: #f7f9fc; border-radius: 6px; }
.jd-link-row .jl-month { font-weight: 600; color: var(--text); }
.jd-link-row .jl-status { font-size: 11px; }
.jd-link-row .jl-status.ok { color: var(--green); }
.jd-link-row .jl-status.warn { color: var(--orange); }
.jl-btn { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.jl-btn.danger { color: var(--red); border-color: #f5c2c2; }
.jd-link-form { display: flex; gap: 6px; }
.jd-link-form .inp { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.jd-link-msg { font-size: 11px; color: var(--muted); margin-top: 6px; min-height: 14px; }
.jd-link-empty { font-size: 12px; color: var(--muted); padding: 4px 0; }
.jd-link-ml { font-size: 12px; color: var(--muted); align-self: center; }
.jd-link-mi { background: #f5f7fb; color: var(--muted); cursor: default; width: 110px; border-style: dashed; }

/* v582: ������ϸ */
.detail-arrow { display:inline-block; cursor:pointer; color:var(--muted); font-size:11px; width:14px; transition:transform .15s; user-select:none; }
.detail-arrow.open { transform:rotate(90deg); }
.detail-arrow.invisible { visibility:hidden; }
.detail-row td { font-size:12px; }
.detail-grid { display:flex; flex-wrap:wrap; gap:6px 16px; }
.detail-item { display:inline-flex; align-items:center; gap:4px; }
.detail-code { font-family:Consolas,monospace; color:var(--muted); }
.detail-qty { color:var(--muted); font-size:11px; }
.prev-arrow { display:inline-block; cursor:pointer; color:var(--muted); font-size:11px; margin-right:4px; user-select:none; }
.prev-arrow.open { }
.prev-detail-row td { font-size:11px; }
.prev-detail-item { display:inline-flex; align-items:center; gap:3px; margin-right:12px; }
.prev-detail-code { font-family:Consolas,monospace; color:var(--muted); }
.prev-detail-qty { color:var(--muted); }

/* v583: ��ϸ���޿� + �۵� */
.detail-grid { display:flex; flex-wrap:wrap; gap:2px 10px; max-width:100%; }
.detail-item { display:inline-flex; align-items:center; gap:3px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-code { font-family:Consolas,monospace; color:var(--muted); font-size:11px; }
.detail-qty { color:var(--muted); font-size:11px; }
.detail-more { color:#9aa3b1; font-size:11px; align-self:center; }
.prev-detail-item { display:inline-flex; align-items:center; gap:3px; margin-right:10px; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prev-detail-code { font-family:Consolas,monospace; color:var(--muted); font-size:11px; }
.prev-detail-qty { color:var(--muted); font-size:11px; }
.prev-detail-more { color:#9aa3b1; font-size:11px; margin-left:4px; }