/* 2026-10-08 08:57:37（北京时间）— 订单/样品公司名称与正文共用80px桌面边距，手机保留18px。 */
/* 2026-10-07 — 修复 display:contents 字段容器实际使用外层12列导致编辑控件挤压。 */
/* 2026-10-07 09:33:00（北京时间）— 订单/样品详情 B 方案，复用分享表单的同底、双列字段与彩色图标。 */
html body :is(#orderDetailModal,#sampleDetailModal) .dd-panel{width:min(820px,calc(100vw - 32px));max-height:calc(100dvh - 48px);border:1px solid var(--dd-line)}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-utility{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 40px 0;flex:none;color:var(--dd-muted);font-size:12px}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-utility>span{min-width:0;overflow-wrap:anywhere}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-close{flex-shrink:0}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-panel>.dd-head{padding:14px 80px 26px!important}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-title{font-size:23px;font-weight:600;line-height:1.5}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-level{display:inline-flex;flex-shrink:0}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-body{padding:0 40px 28px;scrollbar-gutter:stable;overflow-x:hidden}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-footer{display:flex;align-items:center;gap:10px;padding:16px 40px;border-top:1px solid var(--dd-line);background:var(--dd-bg);flex:none;flex-wrap:wrap}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-action-spacer{flex:1}
html body #sampleDetailModal .dd-footer{justify-content:space-between}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-kpis{display:flex;align-items:center;gap:28px;padding:16px 20px;margin:0 0 26px}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-kpi{display:grid;gap:5px;padding:0;min-width:0;border:0!important}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-kpi>span{color:var(--dd-muted);font-size:12px}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-kpi>b{font-size:17px;color:var(--dd-ink);font-weight:600;line-height:1.4}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-kpi.is-main>b{font-size:26px;color:var(--dd-ink)}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-sec{margin-top:28px}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-sec-head h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0;border:0;border-radius:0;background:transparent}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-field{min-width:0}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-field dt{display:flex;align-items:center;gap:7px;color:var(--dd-muted);font-size:13px;margin-bottom:7px;min-height:22px}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-field dd{margin:0;min-height:44px;border:1px solid var(--dd-line);border-radius:6px;padding:10px 12px;color:var(--dd-ink);background:var(--dd-bg);font-size:14px;font-weight:400;line-height:1.6;overflow-wrap:anywhere}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-field dd small{display:block;margin:3px 0 0;font-size:12px;color:var(--dd-muted)}
html body #orderDetailModal .dd-note{font-size:14px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;color:var(--dd-ink)}
html body #orderDetailModal .dd-history{border-top:1px solid var(--dd-line);margin-top:26px;padding-top:16px;color:var(--dd-muted);font-size:13px}
html body #orderDetailModal .dd-history summary{cursor:pointer;padding:4px 0}
html body #orderDetailModal .dd-history .dd-logs{margin-top:12px;border:0;padding:0}
html body #orderDetailModal #od-body.is-editing>.dd-kpis{display:none}
html body #orderDetailModal #od-body.is-editing>.dd-sec{margin-top:0}
html body #orderDetailModal:has(#od-body.is-editing) #od-actions>button:not(#od-edit-toggle-btn){display:none}
html body #orderDetailModal #od-edit-form{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px;padding:0!important;border:0!important}
html body #orderDetailModal #od-edit-form>:is(.order-edit-banner,.order-create-panel,.order-create-note,.order-create-actions){grid-column:1/-1!important}
html body #orderDetailModal #od-edit-form .order-create-grid>.o-row{grid-column:auto!important}
html body #sampleDetailModal .sd-ship{margin-bottom:18px;padding:20px}
html body #sampleDetailModal .sd-ship-head{gap:12px;flex-wrap:wrap;padding:0 0 16px}
html body #sampleDetailModal .sd-seg{min-width:0;overflow-wrap:anywhere;white-space:normal}
html body #sampleDetailModal .sd-sample{gap:12px;padding:16px 0}
html body #sampleDetailModal .sd-s-main{min-width:0}
html body #sampleDetailModal .sd-s-main b{overflow-wrap:anywhere;font-size:14px;font-weight:500}
html body #sampleDetailModal .sd-s-main span{overflow-wrap:anywhere}
html body #sampleDetailModal .sd-s-actions{flex-wrap:wrap;gap:8px}
html body #sampleDetailModal .sd-s-actions .dd-link{white-space:normal;overflow-wrap:anywhere}
html body #sampleDetailModal .sd-note{padding:14px 0 0;margin:0;overflow-wrap:anywhere}
html body #sampleDetailModal .sd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){
 html body :is(#orderDetailModal,#sampleDetailModal)>.dd-panel{width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important}
 html body :is(#orderDetailModal,#sampleDetailModal) .dd-utility{display:flex!important;gap:16px!important;padding:14px 18px 0!important}
 html body :is(#orderDetailModal,#sampleDetailModal) .dd-panel>.dd-head{padding:12px 18px 22px!important}
 html body :is(#orderDetailModal,#sampleDetailModal) .dd-body{padding:0 18px 22px!important}
 html body :is(#orderDetailModal,#sampleDetailModal) .dd-footer{padding:12px 18px;gap:8px}
 html body :is(#orderDetailModal,#sampleDetailModal) .dd-footer .dd-btn{padding:0 10px;min-height:38px}
 html body :is(#orderDetailModal,#sampleDetailModal) .dd-kpis{gap:18px;padding:14px;flex-wrap:wrap}
 html body :is(#orderDetailModal,#sampleDetailModal) .dd-kpi.is-main>b{font-size:23px}
 html body :is(#orderDetailModal,#sampleDetailModal) .dd-fields{gap:18px 14px}
 html body :is(#orderDetailModal,#sampleDetailModal) .dd-field dd{font-size:13px;padding:9px 10px}
 html body #sampleDetailModal .sd-ship{padding:14px}
 html body #sampleDetailModal #sd-body .sd-samples{padding:0!important}
 html body #sampleDetailModal #sd-body .sd-note{padding:12px 0 0!important}
 html body #sampleDetailModal #sd-body .sd-grid{grid-template-columns:minmax(0,1fr)}
 html body #orderDetailModal #od-edit-form{grid-template-columns:minmax(0,1fr)!important;gap:18px}
}

/* 2026-10-08 08:51:46（北京时间）— 已选 B 方案：小标题、明确正文，预计日期右对齐。 */
html body :is(#orderDetailModal,#sampleDetailModal) .dd-title,
html body #foDetailPanel.cd-fo .fo-dp-company{font-size:20px!important;font-weight:500!important;line-height:1.5!important}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-sec-head h3,
html body #foDetailPanel .fo-dp-section-title{font-size:14px!important;font-weight:400!important}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-field dt,
html body #foDetailPanel .cd-field dt,
html body #orderDetailModal .o-label,
html body #sampleDetailModal .sd-grid>label>span{font-size:13px!important;font-weight:400!important}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-field dd,
html body #foDetailPanel .cd-field dd,
html body #sampleDetailModal .sd-s-main b,
html body #sampleDetailModal .sd-seg,
html body #orderDetailModal .dd-items tbody td,
html body #orderDetailModal .o-input,
html body #sampleDetailModal .dd-in{font-size:15px!important;font-weight:650!important;line-height:1.65!important}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-field dd small,
html body #foDetailPanel .cd-attr,
html body #foDetailPanel .cd-bg-empty{font-weight:400!important}
html body #foDetailPanel .cd-bg-text:not(.cd-bg-empty),
html body #foDetailPanel .fo-tl-content,
html body #orderDetailModal .dd-note,
html body #sampleDetailModal .sd-note{font-size:14px!important;font-weight:600!important;line-height:1.8!important}
html body :is(#orderDetailModal,#sampleDetailModal) .dd-kpi>b{font-weight:700!important}
html body :is(#orderDetailModal,#sampleDetailModal,#foDetailPanel) .dd-muted{font-weight:400!important}

html body #orderDetailModal .dd-field-status dd{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
html body #orderDetailModal .dd-field-status dd>span{flex-shrink:0}
html body #orderDetailModal .dd-field-status dd small{display:inline-block;margin:0 0 0 auto;text-align:right;white-space:nowrap;font-weight:400!important}
@media(max-width:760px){
 html body :is(#orderDetailModal,#sampleDetailModal) .dd-title,
 html body #foDetailPanel.cd-fo .fo-dp-company{font-size:18px!important}
}
@media(max-width:560px){html body #orderDetailModal .dd-field-status{grid-column:1/-1}}