/* ===== 中职旅疗休养平台 · 共享设计系统 ===== */
:root{
  /* 工健小屋设计规范：主色 #5856E1 → #8470FF；中性 #13113E/#424064/#97A0BC/#E4EAFC/#F5F8FD；强调 红#FC4527 绿#2FC396 蓝#1F79FF */
  --htkg:#5856E1; --htkg-d:#4644c9; --htkg-l:#8470FF;
  --teal:#2FC396; --teal-d:#1ea67d;
  --gold:#f0922b; --gold-d:#d97915;
  --red:#FC4527; --green:#2FC396; --blue:#1F79FF; --orange:#f0922b; --gray:#97A0BC;
  --ink:#13113E; --ink2:#424064; --ink3:#97A0BC;
  --line:#E4EAFC; --bg:#F5F8FD; --card:#fff;
  --shadow:0 2px 12px rgba(88,86,225,.07); --shadow-l:0 10px 30px rgba(88,86,225,.14);
  --r:13px; --r-s:10px;
  --table-long-field-width:20em;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--bg);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
input,select,textarea,button{font-family:inherit;font-size:14px}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#cdd3df;border-radius:6px}

/* 通用元素 */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.between{justify-content:space-between}.center{justify-content:center}
.wrap{flex-wrap:wrap}.grow{flex:1}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.muted{color:var(--ink2)}.muted2{color:var(--ink3)}.small{font-size:12px}.xs{font-size:11px}
.b{font-weight:700}.sb{font-weight:600}
.price{color:var(--red);font-weight:700}
.amount{font-variant-numeric:tabular-nums}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none!important}
.center-abs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.tag{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:6px;font-size:11px;font-weight:600;
  background:#eef2fb;color:var(--htkg);line-height:1.8;white-space:nowrap}
.tag.gold{background:#fdf1e3;color:var(--gold-d)}
.tag.green{background:#e6f6ee;color:var(--green)}
.tag.gray{background:#eef0f4;color:var(--ink2)}
.tag.red{background:#fdecea;color:var(--red)}
.tag.teal{background:#e2f4f1;color:var(--teal-d)}

/* 状态点 */
.st{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:12px}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-待支付{color:var(--orange)}.st-已支付{color:var(--htkg-l)}.st-已完成{color:var(--green)}
.st-退款中{color:var(--gold-d)}.st-已退款{color:var(--gray)}.st-已取消{color:var(--ink3)}
.st-待审核{color:var(--orange)}.st-通过{color:var(--green)}.st-拒绝{color:var(--red)}
.st-生效,.st-启用,.st-上架,.st-正常{color:var(--green)}
.st-停用,.st-下架{color:var(--ink3)}
.st-未确认{color:var(--orange)}.st-已确认{color:var(--htkg-l)}.st-已审核{color:var(--teal)}.st-已结算{color:var(--green)}
.st-待开票{color:var(--orange)}.st-已开票{color:var(--htkg-l)}.st-已邮寄{color:var(--green)}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;
  border-radius:10px;padding:9px 18px;font-weight:600;font-size:14px;transition:.15s;background:#eef1f6;color:var(--ink)}
.btn:hover{filter:brightness(.97)}.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--htkg);color:#fff}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff}
.btn.teal{background:var(--teal);color:#fff}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink2)}
.btn.danger{background:#fdecea;color:var(--red)}
.btn.sm{padding:5px 12px;font-size:12px;border-radius:8px}
.btn.lg{padding:13px 24px;font-size:16px;width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-link{color:var(--htkg);cursor:pointer;font-weight:600}

/* 表单 */
.field{margin-bottom:14px}
.field>label{display:block;font-size:13px;color:var(--ink2);margin-bottom:6px;font-weight:600}
.input,.select,textarea.input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink);outline:none;transition:.15s}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--htkg-l);box-shadow:0 0 0 3px rgba(88,86,225,.12)}
textarea.input{min-height:80px;resize:vertical}
.req::after{content:" *";color:var(--red)}

/* 表格 */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;color:var(--ink2);font-weight:600;padding:11px 12px;background:#f7f9fc;white-space:nowrap;border-bottom:1px solid var(--line)}
/* 0714：列表页单元格不自动折行（便于一屏查看多条订单），超宽由表格容器横向滚动承接 */
.table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.table td .wrap{white-space:normal}
.table tr:hover td{background:#fafbfe}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
/* 0715：紧凑表格——缩小行列间距，一屏看更多；操作按钮组一行排列不折行 */
.table.compact th{padding:8px 8px}
.table.compact td{padding:7px 8px}
.table.compact .row{flex-wrap:nowrap!important;gap:6px!important}
.table.compact .btn-link{white-space:nowrap}
/* 0715：冻结列（如产品名称）——横向滚动时贴左固定，背景跟随行 hover */
.table .stk{background:#fff}
.table th.stk{background:#f7f9fc}
.table tr:hover td.stk{background:#fafbfe}
.table .stk-r{background-clip:padding-box}
/* 0715：允许标记 .cell-wrap 的单元格内容折行（产品名称过长时换行，配合固定列宽） */
.table td .cell-wrap{white-space:normal;word-break:break-word;line-height:1.45;display:block}
.table th.col-long,.table td.col-long{
  width:var(--table-long-field-width);min-width:var(--table-long-field-width);max-width:var(--table-long-field-width)
}
.table td.col-long{white-space:normal!important}
.cell-long{
  display:block;width:100%;white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;line-height:1.45
}
.cell-long>:not(.tag):not(.st){
  max-width:100%;white-space:normal!important;overflow-wrap:anywhere;word-break:break-word
}

/* 统计卡 */
.stat{background:var(--card);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-top:2px;font-variant-numeric:tabular-nums}
.stat .k{color:var(--ink2);font-size:13px}
.stat .ic{position:absolute;right:14px;top:14px;font-size:24px;opacity:.85}

/* toast / modal / loading */
#toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(28,36,51,.92);color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;box-shadow:var(--shadow-l);animation:tin .2s;max-width:80vw}
.toast.err{background:rgba(224,83,61,.95)}.toast.ok{background:rgba(35,160,107,.95)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
.mask{position:fixed;inset:0;background:rgba(20,28,45,.45);z-index:9000;display:flex;align-items:center;justify-content:center;animation:fin .2s;padding:16px}
@keyframes fin{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:16px;box-shadow:var(--shadow-l);max-width:440px;width:100%;max-height:88vh;overflow:auto;animation:min .25s}
.modal.wide{max-width:720px}
@keyframes min{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px;display:flex;justify-content:space-between;align-items:center}
.modal-b{padding:20px}
.modal-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.x{cursor:pointer;color:var(--ink3);font-size:20px;line-height:1}
#loading{position:fixed;inset:0;z-index:9500;background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center}
.spin{width:34px;height:34px;border:3px solid #d9e0ee;border-top-color:var(--htkg);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{text-align:center;color:var(--ink3);padding:50px 20px}
.empty .e-ic{font-size:42px;opacity:.5;margin-bottom:8px}
.skeleton{background:linear-gradient(90deg,#eef1f6,#f6f8fc,#eef1f6);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}