/* ⑪ 订单与退款 —— 取自 origin/main 的 Tailwind class（orders/_components/*）与 globals.css @theme。所有类名 od- 前缀。 */
.od-full { position: absolute; inset: 0; }
.od-main { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #F9FAFB; }
.od-gap { flex: 1; }
.od-vp { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.od-page { position: absolute; left: 0; right: 0; top: 0; padding: 20px 28px 40px; display: flex; flex-direction: column; gap: 16px; }
.od-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; box-shadow: 0 2px 8px rgba(10, 22, 41, .04); }

/* 页头（order-content.tsx / order-toolbar.tsx） */
.od-hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.od-hl { display: flex; align-items: center; gap: 12px; }
.od-trig { color: #64748B; }
.od-hl h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: #0A1629; }
.od-hl p { margin: 0; font-size: 13px; color: #64748B; }
.od-hr { display: flex; align-items: center; gap: 8px; }
.od-ib, .od-date, .od-exp { height: 40px; border-radius: 12px; border: 1px solid #D8E0F0; background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #1C3E60; font-size: 14px; font-weight: 500; }
.od-ib { width: 40px; }
.od-date { padding: 0 14px; font-variant-numeric: tabular-nums; }
.od-exp { padding: 0 16px; }
.od-tabs { display: flex; gap: 24px; border-bottom: 1px solid #EDEFF0; }
.od-tabs span { padding: 0 2px 10px; font-size: 14px; color: #64748B; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.od-tabs span.on { color: #0A1629; font-weight: 600; border-color: #3DCAB1; }

/* 统计卡（order-stats-cards.tsx） */
.od-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.od-stat { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.od-st-t { font-size: 13px; font-weight: 500; color: #64748B; }
.od-st-v { font-size: 30px; line-height: 38px; font-weight: 700; color: #0A1629; font-variant-numeric: tabular-nums; }
.od-st-v small { margin-left: 4px; font-size: 14px; font-weight: 500; color: #64748B; }
.od-delta { align-self: flex-start; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.od-delta.up { background: #DEF6F1; color: #047857; }
.od-delta.down { background: #FEECED; color: #DC2626; }
.od-pendline { align-self: flex-start; max-width: 100%; margin-top: 2px; display: inline-flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; border-radius: 8px; border: 1px solid #FCD34D; background: #FFFBEB; padding: 6px 10px; font-size: 12px; font-weight: 600; color: #B45309; }
.od-pendline b { color: #0F766E; }

/* 表格卡 */
.od-table { overflow: hidden; }
.od-tb { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.od-search { width: 300px; height: 40px; border-radius: 12px; border: 1px solid #D8E0F0; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; color: #94A3B8; font-size: 14px; flex: none; }
.od-search.focus { border-color: #3DCAB1; box-shadow: 0 0 0 3px rgba(61, 202, 177, .25); }
.od-search .od-ph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-sv { color: #1C3E60; display: inline-flex; align-items: center; }
.od-caret { display: inline-block; width: 1.5px; height: 16px; background: #0A1629; margin-left: 1px; animation: od-blink 1s steps(1) infinite; }
@keyframes od-blink { 50% { opacity: 0; } }
.od-chips { display: flex; gap: 8px; }
.od-chip { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent; background: #F3F4F6; color: #64748B; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.od-chip.warn { background: #FEF3C7; color: #B45309; }
.od-chip.on { border-color: #3DCAB1; background: #F1F8F4; color: #0F766E; font-weight: 600; }
.od-more { height: 32px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #1C3E60; font-weight: 500; }
.od-more.on { background: #F1F8F4; color: #0F766E; }
.od-fcount { display: none; }
.od-fpanel { margin: 0 20px 16px; border-radius: 12px; background: #F9FAFB; padding: 16px; display: grid; grid-template-columns: 1.2fr 1.5fr 1fr 1fr; gap: 20px; }
.od-fpanel > div { display: flex; flex-direction: column; gap: 8px; }
.od-fpanel b { font-size: 12px; font-weight: 600; color: #64748B; }
.od-fpanel b.mt { margin-top: 6px; }
.od-fopts { display: flex; flex-wrap: wrap; gap: 6px; }
.od-fo { height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; border: 1px solid #E5E7EB; font-size: 12px; color: #1C3E60; display: inline-flex; align-items: center; }
.od-range { display: flex; align-items: center; gap: 6px; }
.od-range span { flex: 1; height: 32px; border-radius: 8px; border: 1px solid #D8E0F0; background: #fff; font-size: 12px; color: #94A3B8; display: inline-flex; align-items: center; padding: 0 8px; }
.od-range i { color: #94A3B8; font-style: normal; }
.od-fsel { height: 32px; border-radius: 8px; border: 1px solid #D8E0F0; background: #fff; font-size: 12px; color: #1C3E60; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.od-reset { font-size: 12px; color: #0F766E; font-weight: 500; margin-top: auto; }
.od-batch { margin: 0 20px 12px; height: 44px; border-radius: 12px; background: #F0FDFA; border: 1px solid #99F6E4; display: flex; align-items: center; padding: 0 8px 0 14px; font-size: 13px; font-weight: 600; color: #0A1629; }
.od-bbtn { height: 32px; padding: 0 14px; border-radius: 8px; background: #0F766E; color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }

.od-th, .od-tr { display: grid; grid-template-columns: 18px minmax(124px, 1fr) 1.4fr 1.5fr 0.6fr 0.9fr minmax(120px, 1fr) 0.7fr minmax(196px, 1.3fr); gap: 14px; align-items: center; padding: 0 20px; }
.od-th { height: 40px; background: #F9FAFB; font-size: 12px; color: #64748B; }
.od-th .r { text-align: right; }
.od-tr { min-height: 58px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #EDEFF0; font-size: 13px; color: #1C3E60; }
.od-tr.sel { background: rgba(240, 253, 250, .6); }
.od-no { font-variant-numeric: tabular-nums; color: #0A1629; font-weight: 500; }
.od-cust, .od-svc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.od-cust b, .od-svc b { font-weight: 600; color: #0A1629; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-cust small, .od-svc small { font-size: 12px; color: #64748B; font-variant-numeric: tabular-nums; }
.od-num { font-variant-numeric: tabular-nums; }
.od-auto { display: inline-flex; align-items: center; gap: 4px; color: #0F9C7E; font-weight: 600; }
.od-amt { text-align: right; font-weight: 600; color: #0A1629; font-variant-numeric: tabular-nums; }
.od-amt.warn { color: #B45309; }
.od-acts { display: flex; justify-content: flex-end; align-items: center; gap: 10px; white-space: nowrap; }
.od-sbtn { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #FCD34D; background: #FFFBEB; color: #B45309; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; }
.od-link { color: #0F766E; font-weight: 500; }
.od-cb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #CBD5E1; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.od-cb.on { background: #0F766E; border-color: #0F766E; }
.od-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.od-pill i { width: 6px; height: 6px; border-radius: 50%; }
.od-pill.completed { background: #DEF6F1; color: #047857; } .od-pill.completed i { background: #059669; }
.od-pill.refunded { background: #F3F4F6; color: #374151; } .od-pill.refunded i { background: #94A3B8; }
.od-pill.refunding { background: #FFEDD5; color: #C2410C; } .od-pill.refunding i { background: #F97316; }
/* KUE-1458：部分退款与退款中同色（order-display.ts partially_refunded = orange） */
.od-pill.partial { background: #FFEDD5; color: #C2410C; } .od-pill.partial i { background: #F97316; }
.od-already { font-size: 12px; line-height: 18px; color: #6B7280; margin: -6px 0 2px; }
.od-pill.pending { background: #FEF3C7; color: #B45309; } .od-pill.pending i { background: #F59E0B; }
.od-pill.pc { background: #FEF3C7; color: #B45309; border: 1px solid #FCD34D; }
.od-pager { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 13px; color: #64748B; }
.od-pages { display: flex; gap: 6px; }
.od-pages i { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #E5E7EB; display: inline-flex; align-items: center; justify-content: center; font-style: normal; color: #1C3E60; font-size: 13px; }
.od-pages i.on { border-color: #3DCAB1; background: #F1F8F4; color: #0F766E; font-weight: 600; }

/* 详情（order-detail-content.tsx） */
.od-dh { display: flex; align-items: center; gap: 12px; }
.od-back { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #D8E0F0; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #1C3E60; flex: none; }
.od-dt { display: flex; align-items: center; gap: 10px; }
.od-dt h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: #0A1629; font-variant-numeric: tabular-nums; }
.od-dh p { margin: 2px 0 0; font-size: 13px; color: #64748B; }
.od-refund { height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid #F65160; color: #DC2626; background: #fff; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; }
.od-dcols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.od-dcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.od-box { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.od-bh { display: flex; align-items: center; gap: 10px; }
.od-bh > b { font-size: 16px; font-weight: 600; color: #0A1629; }
.od-bh a { margin-left: auto; color: #0F766E; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 3px; }
.od-bh .od-gap + a { margin-left: 0; }
.od-cust2 { display: flex; gap: 14px; align-items: flex-start; }
.od-av { width: 48px; height: 48px; border-radius: 50%; background: #E7F7EF; color: #0F766E; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.od-cust2 > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.od-cn { display: flex; align-items: center; gap: 8px; }
.od-cn b { font-size: 16px; font-weight: 600; color: #0A1629; }
.od-vip { display: inline-flex; align-items: center; gap: 3px; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #F59E0B, #F97316); }
.od-cust2 small { font-size: 13px; color: #64748B; }
.od-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 13px; align-items: center; }
.od-kv span { color: #64748B; }
.od-kv b { font-weight: 500; color: #0A1629; font-variant-numeric: tabular-nums; }
.od-kv.red b { color: #DC2626; }
.od-sline { display: flex; align-items: center; gap: 10px; border-radius: 10px; background: #F9FAFB; padding: 10px 12px; position: relative; }
.od-sline i { width: 3px; align-self: stretch; border-radius: 2px; background: #3DCAB1; }
.od-sline b { font-size: 13px; font-weight: 600; color: #0A1629; }
.od-sline small { margin-left: auto; font-size: 13px; color: #64748B; }
.od-li { display: flex; justify-content: space-between; font-size: 14px; color: #0A1629; }
.od-li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.od-tot { border-top: 1px solid #EDEFF0; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.od-tot .od-kv { grid-template-columns: 1fr auto; }
.od-grand { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #EDEFF0; padding-top: 12px; }
.od-grand span { font-size: 14px; font-weight: 600; color: #0A1629; }
.od-grand b { font-size: 24px; font-weight: 700; color: #0A1629; font-variant-numeric: tabular-nums; }
.od-rc { display: inline-flex; gap: 16px; }
.od-rc a { color: #0F766E; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }

/* 弹窗 */
.od-dlg { position: absolute; z-index: 50; left: 50%; top: 50%; translate: -50% -50%; background: #fff; box-shadow: 0 12px 32px rgba(10, 22, 41, .12); animation: od-pop .2s ease; }
@keyframes od-pop { from { opacity: 0; transform: scale(.97); } }
.od-cdlg { width: 560px; border-radius: 16px; }
.od-dlgh { padding: 18px 24px 14px; border-bottom: 1px solid #EDEFF0; display: flex; flex-direction: column; gap: 4px; }
.od-dlgh b { font-size: 18px; line-height: 28px; font-weight: 600; color: #0A1629; }
.od-dlgh small { font-size: 13px; color: #64748B; }
.od-dlgb { padding: 18px 24px; display: flex; flex-direction: column; gap: 10px; }
.od-q { font-size: 14px; font-weight: 600; color: #0A1629; }
.od-mopt { display: flex; align-items: center; gap: 12px; border-radius: 12px; border: 1px solid #E5E7EB; padding: 12px 14px; }
.od-mopt.on { border: 1.5px solid #3DCAB1; background: #F0FDFA; }
.od-mopt span { display: flex; flex-direction: column; gap: 2px; }
.od-mopt b { font-size: 14px; font-weight: 600; color: #0A1629; }
.od-mopt small { font-size: 12px; color: #64748B; }
.od-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #CBD5E1; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.od-mopt.on .od-radio { border-color: #0F766E; }
.od-radio i { width: 8px; height: 8px; border-radius: 50%; background: #0F766E; }
.od-hint { font-size: 12px; line-height: 18px; color: #94A3B8; }
.od-dlgf { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid #EDEFF0; }
.od-bo, .od-bp, .od-bd { height: 40px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; }
.od-bo { border: 1px solid #D8E0F0; color: #1C3E60; background: #fff; }
.od-bp { background: #0F766E; color: #fff; font-weight: 600; }
.od-bd { background: #DC2626; color: #fff; font-weight: 600; }

.od-rdlg { width: 480px; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.od-rh { display: flex; align-items: center; justify-content: space-between; }
.od-rh b { font-size: 20px; font-weight: 600; color: #0A1629; }
.od-x { color: #64748B; }
.od-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.od-tiles > div { border-radius: 12px; background: #F9FAFB; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.od-tiles small { font-size: 12px; color: #64748B; }
.od-tiles b { font-size: 15px; font-weight: 600; color: #0A1629; font-variant-numeric: tabular-nums; }
.od-fld { display: flex; flex-direction: column; gap: 8px; }
.od-fld > b { font-size: 14px; font-weight: 600; color: #0A1629; }
.od-amtrow { display: flex; gap: 8px; }
.od-in { flex: 1; height: 40px; border-radius: 12px; border: 1px solid #D8E0F0; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 15px; color: #0A1629; font-variant-numeric: tabular-nums; }
.od-in > i:first-child { font-style: normal; color: #94A3B8; }
.od-in.focus { border-color: #3DCAB1; box-shadow: 0 0 0 3px rgba(61, 202, 177, .25); }
.od-fullbtn { height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid #D8E0F0; color: #1C3E60; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; }
.od-rchips { display: flex; flex-wrap: wrap; gap: 8px; }
.od-rchip { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent; background: #F3F4F6; color: #64748B; font-size: 13px; display: inline-flex; align-items: center; }
.od-rchip.on { border-color: #3DCAB1; background: #F1F8F4; color: #0F766E; font-weight: 600; }
.od-ent { border-radius: 12px; background: #F1F8F4; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.od-ent > b { font-size: 13px; font-weight: 600; color: #0A1629; }
.od-ent > small { font-size: 12px; color: #64748B; }
.od-entrow { margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.od-entrow span { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.od-entrow b { font-size: 13px; font-weight: 600; color: #0A1629; }
.od-entrow small { font-size: 12px; color: #64748B; }
.od-entrow em { font-style: normal; font-size: 13px; font-weight: 600; color: #B45309; }
.od-partial { border-radius: 12px; background: #F3F4F6; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.od-partial b { font-size: 13px; font-weight: 600; color: #374151; }
.od-partial small { font-size: 12px; color: #64748B; line-height: 1.5; }
.od-warn { display: flex; gap: 8px; align-items: flex-start; border-radius: 12px; border: 1px solid #FCD34D; background: #FFFBEB; color: #92400E; padding: 10px 12px; font-size: 12px; line-height: 1.5; }
.od-warn .lu { flex: none; margin-top: 1px; }
.od-rf { display: flex; justify-content: flex-end; gap: 10px; }

/* 教程说明卡（不是产品界面：标出弹窗里会遇到的几种提示） */
.od-notes { position: absolute; z-index: 30; left: 256px; top: 160px; width: 500px; border-radius: 16px; border: 2px dashed #3DCAB1; background: rgba(255, 255, 255, .97); box-shadow: 0 12px 32px rgba(10, 22, 41, .14); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; animation: od-pop .25s ease; }
.od-nh { display: flex; align-items: center; gap: 8px; color: #0F766E; }
.od-nh b { font-size: 15px; font-weight: 700; }
.od-note { border-radius: 12px; background: #F9FAFB; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.od-note b { font-size: 13px; font-weight: 600; color: #0A1629; }
.od-note span { font-size: 12px; line-height: 1.55; color: #475569; }