html{touch-action:manipulation}
/* ============================================================
   德得珠宝 — 全局样式 v6.1（Tech-Minimal + Frosted）
   高级简约科技风：冷白画布 / 墨色文字 / 单一电光蓝 accent /
   hairline 细线 / 克制小圆角 / Inter 数字 / 细微冷灰投影
   门户入口卡升级 70% 毛玻璃（backdrop blur + 蓝紫光斑）
   ============================================================ */
:root{
  /* 电光蓝 accent（全站唯一强调色） */
  --acc:#3D6BF4;
  --acc-2:#2B50E0;
  --acc-deep:#1E3AA8;
  --acc-tint:#EEF3FE;
  --acc-soft:#E4ECFD;
  --acc-line:rgba(61,107,244,.22);
  /* 墨色与灰阶 */
  --ink:#0A1220;
  --ink-2:#47536A;
  --ink-3:#8E99AB;
  --deep:#0C1524;
  --deep-2:#16233A;
  /* 表面：白卡 + 冷灰画布 */
  --glass:rgba(255,255,255,.84);
  --glass-strong:rgba(255,255,255,.95);
  --glass-ink:rgba(9,15,28,.62);
  /* 线条/投影：与 --canvas 同族的中性色，换皮肤时由 skins.js 一并调整；
     这里的值 = 默认皮肤「雾霾蓝」，只作 JS 未生效时的兜底 */
  --line:#CFD8E3;
  --line-soft:#DDE5EE;
  /* 画布底色（页面背景）：皮肤功能改的就是这一个变量，见 public/js/skins.js */
  --canvas:#E3E9F0;
  /* 语义色（低饱和，克制使用） */
  --green:#2F8F6B;--green-tint:#E6F2EC;
  --red:#D4564A;--red-tint:#FBECEA;
  --blue:#3D6BF4;--blue-tint:#EEF2FE;
  --orange:#C07A2E;--orange-tint:#F7EFE1;
  /* 暖调投影：纸底上冷蓝灰投影会发灰发脏 */
  --shadow:0 1px 2px rgba(60,50,35,.06),0 14px 36px rgba(60,50,35,.08);
  --shadow-lg:0 12px 30px rgba(60,50,35,.10),0 34px 84px rgba(60,50,35,.16);
  --blur:blur(18px) saturate(1.35);
  --radius:18px;
  --radius-sm:12px;
  /* 科技字体：数字/英文 Inter 优先；中文黑体回退 */
  --font-en:"Inter","SF Pro Text","Segoe UI","Helvetica Neue","PingFang SC","Microsoft YaHei UI",Arial,sans-serif;
  --font-cn:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 关键：保证 hidden 属性永远优先于任何 display 声明 */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
/* ================================================================
   页面背景：由皮肤变量 --canvas 驱动（v8.38）
   ----------------------------------------------------------------
   · 具体颜色在 public/js/skins.js 的 SKINS 里（20 个可选），
     用户挑一个后只改 :root 上的 --canvas / --line / --line-soft。
   · 默认值 #E3E9F0 = 雾霾蓝（2026-10-09 指定），与 skins.js 的 DEFAULT_ID='mist' 一致。
   · 这里只写 background-color，不带 background-image：
     历史上用过「深蓝渐变」和「纸纹贴图」，现为纯色，两者都已移除。
   ================================================================ */
body{
  font-family:var(--font-cn);
  color:var(--ink);
  background-color:var(--canvas);
  min-height:100vh;line-height:1.6;font-size:15px;
  -webkit-font-smoothing:antialiased;
}
/* 顶栏：半透明白，底色由 --canvas 透出来，自动跟随皮肤 */
.topbar{background:rgba(255,255,255,.9)}
/* 注：曾试过用 body::before 铺 SVG 噪点做颗粒感，但 feTurbulence 在透明底上
   会算出灰值，opacity 后变成一层浅灰罩，把背景整个盖掉（实测顶部像素 rgb(190,197,205)）。
   现在背景是纯色，不需要颗粒；若将来要加纹理，请用真实贴图并先量像素再定 opacity。 */
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
a{color:inherit;text-decoration:none}
.muted{color:var(--ink-3)}

/* ---------- 顶栏（白色毛玻璃 + hairline） ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.72);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line-soft);
}
/* 顶栏容器宽度与内容区（.view）保持一致，两侧边缘才对得齐（2026-10-14 统一成 1440） */
.topbar-inner{max-width:1440px;margin:0 auto;padding:0 20px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;background:none;border:none;text-align:left}
.brand-mark{
  width:46px;height:46px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#1E2C48,#0B1424);
  box-shadow:0 6px 16px rgba(13,22,40,.22), inset 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden;
}
.brand-mark img{width:40px;height:40px;display:block;object-fit:contain}
.brand-name{font-size:18px;font-weight:800;letter-spacing:3px;color:var(--ink);line-height:1.1}
.brand-sub{display:block;font-family:var(--font-en);font-size:9.5px;letter-spacing:2.5px;color:var(--acc);text-transform:uppercase;margin-top:2px;font-weight:700}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-who{font-size:13px;color:var(--ink-2)}
.topbar-who b{color:var(--ink)}
.btn-mini{
  border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--ink-2);
  padding:7px 15px;border-radius:10px;font-size:13px;transition:border-color .2s,color .2s;
}
.btn-mini:hover{border-color:var(--acc);color:var(--acc)}

/* 顶栏常驻导航（v8.35）：成品展示 / 3D 效果图 / 我的订单 三个入口按钮；与「退出」同族，用主题蓝区分主次。
   .on = 当前所在页，实心蓝底白字。后台工作人员顶栏不渲染「我的订单」（见 ui.js 的 navHtml）。 */
.btn-mini.top-entry{border-color:var(--acc-line);color:var(--acc);font-weight:700}
.btn-mini.top-entry:hover{border-color:var(--acc);color:var(--acc-2);background:#fff}
.btn-mini.top-entry.on,.btn-mini.top-entry.on:hover{border-color:var(--acc);background:var(--acc);color:#fff}

/* ---------- 视图切换（舒缓：慢滑入场 v8.21） ---------- */
/* PC 端所有页面统一用 1440 宽的容器（原来 1120）：和数据看板同宽，宽表不再被截
   （2026-10-14 老板要求）。窄屏（≤1440）自动按视口收窄，手机 / 平板行为不变；
   门户页 .portal-view 自己覆盖成 max-width:none（全宽），不受影响。 */
.view{display:none;max-width:1440px;margin:0 auto;padding:38px 20px 64px;animation:fadeUp .55s cubic-bezier(.16,1,.3,1)}
.view.on{display:block}
/* 登录/注册页必须保持 flex 垂直居中：
   .view.on 的 display:block 特异性更高会覆盖 .auth-view 的 flex，
   因此这里用更高特异性强制居中生效。 */
.view.on.auth-view{display:flex;justify-content:center;align-items:center}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 平板 / 手机（≤1366px）视图入场只做淡入，不做那 14px 位移（v8.45）
   原因：.view 上挂 transform 动画会把整个视图提升成一个合成层，而 iPad Safari 在
   「上方内容高度变化」之后（日报提示条显示/隐藏、统计卡换行、订单表重渲染）会留着
   旧位置的瓦片不重画 —— 表现就是后台首页那条「全部/进行中/已完成 + 已完成图片 +
   搜索 + 新建订单」工具条整条浮到订单表某一行的位置上（2026-10-09 平板截图）。
   只动 opacity 不会产生几何位移，也就没有「位置会画错」的层。桌面（>1366px）保留原上滑。 */
@media (max-width:1366px){
  .view{animation-name:fadeIn;animation-duration:.4s;animation-timing-function:ease}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- 门户 ---------- */
.portal-view{max-width:none;padding:0;overflow-x:hidden;overflow-x:clip}   /* 装饰光斑 ::before/::after 会伸出容器 40px，不裁掉整页会横向滚动 */
/* 门户首屏：背景改为米白纸纹后不再需要"把内容压到浅色区"，
   恢复常规居中排版（上一版为深蓝渐变加的 min-height/justify-content:flex-end 已撤掉）。 */
.portal-hero{max-width:1440px;margin:0 auto;padding:96px 24px 66px;text-align:center}
/* letter-spacing 会把一份间距留在末字之后，单字符的 ✦ 因此整体左偏半个字距；
   装饰符不需要字距，去掉后它才真正居中（2026-10-15） */
.portal-orn{
  color:var(--acc);font-size:15px;letter-spacing:0;margin-bottom:22px;font-weight:300;
  opacity:.9;
}
/* 同理：标题四个字后面也多出 6px。text-align:center 下首行缩进只有一半净效果，
   所以缩进量给满一个 letter-spacing，正好把文字拉回视觉中心（2026-10-15） */
.portal-hero h1{font-size:clamp(28px,4.6vw,44px);font-weight:800;letter-spacing:6px;text-indent:6px;color:var(--ink);line-height:1.3}
.portal-hero h1 em{
  font-style:normal;display:block;margin-top:14px;font-size:clamp(13.5px,2vw,16px);
  font-weight:500;letter-spacing:4px;color:var(--ink-2);
}
.portal-hero h1::after{
  content:"";display:block;width:48px;height:3px;border-radius:2px;margin:28px auto 0;
  background:linear-gradient(90deg,var(--acc),var(--acc-deep));
}
.portal-sub{margin:26px auto 56px;color:var(--ink-3);font-size:14.5px;letter-spacing:.5px}
.portal-cards{position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:22px}
/* 卡片背后的电光蓝光斑：让 70% 毛玻璃有光可透、有影可糊 */
.portal-cards::before,.portal-cards::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.portal-cards::before{
  width:min(420px,66%);height:min(420px,66%);left:-30px;top:-64px;
  background:radial-gradient(circle at 34% 36%,rgba(106,140,255,.5) 0%,rgba(61,107,244,.16) 54%,rgba(61,107,244,0) 72%);
}
.portal-cards::after{
  width:min(460px,72%);height:min(460px,72%);right:-40px;bottom:-150px;
  background:radial-gradient(circle at 62% 42%,rgba(150,124,255,.44) 0%,rgba(104,86,235,.14) 56%,rgba(104,86,235,0) 74%);
}
/* 门户主入口卡（客户 / 成品展示） */
.portal-entry{
  flex:1 1 380px;min-width:min(360px,90vw);max-width:520px;
  display:flex;flex-direction:column;text-align:left;padding:34px 38px 30px;border-radius:20px;
  /* 毛玻璃：70% 不透明度 + 高斯模糊，背后的光斑与渐变透出并柔化 */
  background:rgba(255,255,255,.70);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.95);
  position:relative;overflow:hidden;transition:.28s ease;
}
.portal-entry:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(61,107,244,.28)}
/* 底部一行：工作人员入口 + ICP 备案号（窄屏自动换行，别互相挤） */
.portal-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;margin-top:4px}
.pe-top{display:flex;align-items:center;gap:18px}
.pe-ico{
  width:62px;height:62px;border-radius:16px;flex:none;
  background:var(--acc-tint);color:var(--acc);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(61,107,244,.14);
}
.pe-title{display:block;font-size:22px;font-weight:800;letter-spacing:1px;color:var(--ink)}
.pe-sub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:5px;letter-spacing:.5px;text-wrap:balance}
.pe-desc{display:block;margin-top:auto;padding-top:16px;color:var(--ink-2);font-size:13.5px;line-height:1.8}
.pe-btn{
  display:inline-block;margin-top:22px;align-self:flex-start;padding:12px 28px;border-radius:12px;font-weight:700;
  letter-spacing:2px;font-size:14px;color:#fff;
  background:linear-gradient(135deg,#4E77F6,#2B50E0);
  box-shadow:0 10px 24px rgba(43,80,224,.32), inset 0 1px 0 rgba(255,255,255,.22);
  transition:.2s;
}
.portal-entry:hover .pe-btn{box-shadow:0 14px 32px rgba(43,80,224,.42), inset 0 1px 0 rgba(255,255,255,.22)}
.portal-entry:hover .pe-btn{transform:translateY(-1px)}
.staff-link{
  position:relative;margin-top:8px;font-size:12.5px;color:var(--ink-3);letter-spacing:.5px;cursor:pointer;
  border-bottom:1px dashed var(--line);padding-bottom:2px;transition:color .2s,border-color .2s;
}
.staff-link:hover{color:var(--acc);border-color:var(--acc-line)}
.staff-link::before{content:"";position:absolute;inset:-12px -10px}
/* ICP 备案号：工信部要求可见且可点击跳转（新窗口打开） */
.icp-link{
  position:relative;margin-top:8px;font-size:12.5px;color:var(--ink-3);letter-spacing:.5px;
  text-decoration:none;border-bottom:1px dashed var(--line);padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.icp-link:hover{color:var(--acc);border-color:var(--acc-line)}

/* ---------- 表单 ---------- */
.auth-view{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 186px);padding:44px 20px 56px}
.auth-card{
  width:100%;max-width:428px;border-radius:20px;padding:36px 36px 32px;
  background:var(--glass-strong);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-lg);
  position:relative;
}
.auth-tabs{display:flex;margin-bottom:26px;border-bottom:1px solid var(--line);gap:6px;position:relative;z-index:1}
.atab{flex:1;background:none;border:none;padding:12px 0 14px;font-size:15px;color:var(--ink-3);border-bottom:2px solid transparent;letter-spacing:4px;font-weight:600;transition:.25s}
.atab:hover{color:var(--acc)}
.atab.on{color:var(--acc);border-color:var(--acc)}
.f-label{display:block;font-size:12px;color:var(--ink-2);margin:16px 0 7px;letter-spacing:1px;font-weight:700}
.f-input,.f-textarea{
  width:100%;border:1px solid var(--line);background:rgba(255,255,255,.9);border-radius:var(--radius-sm);
  padding:13px 15px;font-size:14.5px;color:var(--ink);outline:none;transition:.18s;
}
.f-input::placeholder,.f-textarea::placeholder{color:#A7B1C0}
.f-input:focus,.f-textarea:focus{border-color:var(--acc);background:#fff;box-shadow:0 0 0 4px rgba(61,107,244,.12)}
.f-input.search{width:min(400px,100%);min-width:260px}
/* 分类自定义下拉（v8.29，替代手机端不弹出的原生 datalist） */
.cat-select{position:relative}
.cat-select .f-input{padding-right:42px}
.cat-arrow{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);width:30px;height:30px;
  border:none;background:transparent;color:var(--ink-3);font-size:12px;cursor:pointer;border-radius:8px;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.cat-arrow:hover{background:var(--acc-tint);color:var(--acc)}
.cat-arrow.on{transform:translateY(-50%) rotate(180deg)}
.cat-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
  background:var(--glass-strong);border:1px solid var(--line-soft);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:6px;max-height:230px;overflow:auto;
}
.cat-opt{padding:10px 12px;border-radius:8px;font-size:14px;color:var(--ink-2);cursor:pointer;transition:.12s}
.cat-opt:hover{background:var(--acc-tint);color:var(--acc)}
.cat-opt:active{background:var(--acc-soft)}
@media (prefers-reduced-motion: reduce){.cat-arrow{transition:none}}
.f-hint{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.auth-hint{margin-top:20px;text-align:center;font-size:12.5px;color:var(--ink-3);position:relative;z-index:1}
.auth-hint b{color:var(--acc)}
.auth-err{
  display:block;background:var(--red-tint);color:var(--red);
  border:1px solid rgba(212,86,74,.22);border-radius:12px;padding:11px 14px;
  font-size:13px;line-height:1.5;margin-bottom:18px;position:relative;z-index:1;
}
.admin-badge{display:flex;align-items:center;gap:8px;justify-content:center;color:var(--ink);font-size:15px;letter-spacing:5px;font-weight:800;margin-bottom:10px}
.admin-badge svg{color:var(--acc)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.span2{grid-column:span 2}

/* ---------- 按钮 ---------- */
.btn{
  border:none;border-radius:var(--radius-sm);padding:13px 24px;font-size:14.5px;
  font-weight:700;letter-spacing:2px;transition:.2s;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;white-space:nowrap;
}
.btn-block{width:100%;margin-top:28px;padding:14px}
.btn-gold{
  background:linear-gradient(135deg,#4E77F6,#2B50E0);color:#fff;
  box-shadow:0 10px 24px rgba(43,80,224,.30), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-gold:hover{filter:brightness(1.08);box-shadow:0 12px 30px rgba(43,80,224,.4)}
.btn-dark{background:linear-gradient(135deg,#182A45,#0B1424);color:#EDF2FB;box-shadow:0 10px 24px rgba(11,20,36,.28)}
.btn-dark:hover{filter:brightness(1.25)}
.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
.btn-danger-ghost{border:1px solid rgba(212,86,74,.4);background:rgba(255,255,255,.8);color:var(--red)}
.btn-danger-ghost:hover{background:var(--red-tint)}
.btn-sm{padding:9px 17px;font-size:13px;letter-spacing:1px;border-radius:10px}
.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:auto;filter:grayscale(.2)}
.btn:disabled:hover{filter:grayscale(.2);box-shadow:none}
.link-del{background:none;border:none;color:var(--ink-3);font-size:12.5px;text-decoration:underline;margin-top:6px}
.link-del:hover{color:var(--red)}

/* ---------- 订单列表行内操作按钮 ---------- */
.td-act{text-align:right}
.row-acts{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.row-btn{border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--ink-2);border-radius:8px;
  padding:5px 12px;font-size:12.5px;letter-spacing:1px;cursor:pointer;transition:background .18s,border-color .18s,color .18s;font-family:inherit}
.row-btn:hover{border-color:var(--acc);color:var(--acc)}
.row-btn.danger{color:var(--red)}
.row-btn.danger:hover{border-color:var(--red);background:var(--red-tint)}

/* ---------- 用户管理：头像 / 表格 ---------- */
.u-ava{width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#3D6BF4,#6C4BD8);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
  box-shadow:0 3px 10px rgba(61,107,244,.28)}

/* ---------- 客户首页 ---------- */
.page-head h2{font-size:24px;letter-spacing:1px}
.page-head h2 .accent{color:var(--acc)}
.page-sub{color:var(--ink-3);font-size:13px;margin-top:6px}
.section-title-row{display:flex;align-items:center;gap:10px;margin:44px 0 18px}
.section-title{font-size:16px;letter-spacing:2px;font-weight:800}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:9px;box-shadow:0 0 10px currentColor}
.dot.gold{background:var(--acc);color:var(--acc)}
.dot.gray{background:var(--ink-3);color:var(--ink-3)}
.count-pill{background:var(--acc-tint);color:var(--acc);border-radius:999px;font-size:12px;padding:3px 12px;font-weight:800;border:1px solid rgba(61,107,244,.14)}
.order-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.empty-tip{
  grid-column:1/-1;text-align:center;padding:52px 20px;color:var(--ink-3);
  background:var(--glass);border:1.5px dashed var(--line);border-radius:var(--radius);
  font-size:14px;
}
/* 表格内空态：脱离表格 min-width=760 横向滚动容器，让文案自然撑满 */
.empty-tip.in-table{padding:50px 24px;text-align:center;color:var(--ink-3);background:var(--glass);border:1.5px dashed var(--line);border-radius:var(--radius)}

/* 订单卡片 */
.ocard{
  background:var(--glass);border:1px solid var(--line-soft);border-radius:18px;
  overflow:hidden;cursor:pointer;transition:.22s;display:flex;
  box-shadow:var(--shadow);
}
.ocard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(61,107,244,.3)}
.ocard .thumb{width:106px;flex:none;background:linear-gradient(150deg,#F4F7FC,#E9EEF7);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.ocard .thumb img{width:100%;height:100%;object-fit:cover}
.ocard .thumb .noimg{font-family:var(--font-en);color:#9FB0CF;font-size:32px}
/* 订单卡片「新动态」角标 */
.new-flag{
  position:absolute;top:8px;left:8px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#FF6B5E,#E23B31);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:1px;line-height:1;
  padding:4px 9px;border-radius:999px;
  box-shadow:0 4px 12px rgba(212,86,74,.45);
}
.new-flag::after{
  content:"";position:absolute;inset:-1px;border-radius:999px;pointer-events:none;
  box-shadow:0 6px 16px rgba(226,59,49,.55);animation:ringPulse 2.6s ease-in-out infinite;
}
.new-flag::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.ocard.has-new{border-color:rgba(226,59,49,.45);box-shadow:0 6px 18px rgba(226,59,49,.10)}
.ocard .body{flex:1;padding:15px 17px 14px;min-width:0}
.ocard .row1{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ocard .code{font-family:var(--font-en);font-size:11.5px;color:var(--ink-3);letter-spacing:.8px}
.ocard .title{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}
.ocard .meta{font-size:12px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 14px}
.ocard .meta b{color:var(--ink);font-family:var(--font-en);font-weight:600}

/* 状态徽章（语义低饱和） */
.badge{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 12px;
  font-size:12px;font-weight:700;letter-spacing:1px;white-space:nowrap;margin-left:auto;flex:none;
  border:1px solid transparent;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.badge.ordered{background:var(--orange-tint);color:#96702A}
.badge.designing{background:var(--blue-tint);color:#3560E0}
.badge.making{background:#E7F3F4;color:#2E7C93}
.badge.qc{background:#F0EDFA;color:#6B5BB8}
.badge.done{background:linear-gradient(140deg,#16233A,#0B1424);color:#E9EFF9}
.badge.done::before{background:#7E9BF8}
.badge.large{padding:5px 15px;font-size:13px}
/* 进展提示条：徽章与文案同一行左对齐，不继承 .badge 的 margin-left:auto */
.note-strip .badge{margin-left:0}

/* 详情页 */
.detail-head{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.back-btn{
  flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:border-color .2s,color .2s;font-size:15px;
  box-shadow:var(--shadow);
}
.back-btn:hover{border-color:var(--acc);color:var(--acc)}
.detail-head h2{font-size:20px;letter-spacing:1px}

.detail-card{
  background:var(--glass);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:26px 26px 24px;box-shadow:var(--shadow);margin-bottom:22px;
  position:relative;
}
.dc-head{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;position:relative}
.dc-thumb{width:96px;height:96px;border-radius:16px;overflow:hidden;background:linear-gradient(150deg,#F4F7FC,#E9EEF7);flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-soft)}
.dc-thumb .noimg{font-family:var(--font-en);color:#9FB0CF;font-size:32px}
.dc-thumb img{width:100%;height:100%;object-fit:cover}
.dc-title{font-size:19px;font-weight:800;letter-spacing:.5px}
.dc-code{font-family:var(--font-en);color:var(--ink-3);font-size:12px;letter-spacing:1px;margin-top:3px}
.dc-desc{color:var(--ink-2);font-size:13.5px;margin-top:8px}
.kv-row{display:flex;gap:34px;margin-top:16px;flex-wrap:wrap}
.kv{font-size:13px}
.kv .k{display:block;color:var(--ink-3);font-size:11.5px;letter-spacing:1px}
.kv .v{display:block;font-size:16px;font-weight:700;margin-top:2px;font-family:var(--font-en)}
.kv .v.cny{color:var(--acc-2)}
.kv .v.plain{font-family:var(--font-cn)}

/* 五节点步骤条 */
.steps{display:flex;margin:8px 0 6px;position:relative}
.steps::before{content:"";position:absolute;top:15px;left:6%;right:6%;height:2px;background:var(--line)}
.steps.done-line::before{background:linear-gradient(90deg,var(--acc) var(--p,0%),var(--line) var(--p,0%))}
.step{flex:1;text-align:center;position:relative;z-index:1}
.step .sd{
  width:30px;height:30px;border-radius:50%;margin:0 auto 7px;
  background:#fff;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-3);
  transition:background .3s,border-color .3s,color .3s;font-weight:700;box-shadow:0 2px 8px rgba(15,23,42,.06);
}
.step .sl{font-size:12px;color:var(--ink-3);letter-spacing:1px;transition:.3s}
.step.cur .sd{
  background:linear-gradient(135deg,#4E77F6,#2B50E0);border-color:var(--acc);color:#fff;
  box-shadow:0 0 0 5px rgba(61,107,244,.16),0 6px 16px rgba(43,80,224,.38);
}
.step.cur .sd{position:relative}
.step.cur .sd::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 5px rgba(61,107,244,.22);animation:ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.22);opacity:.22}
}
.step.cur .sl{color:var(--acc);font-weight:800}
.step.done .sd{background:var(--acc-tint);border-color:#C9D8FB;color:var(--acc)}
.step.done .sl{color:var(--ink-2)}

/* 时间线 */
.tl{position:relative}
.tl-item{position:relative;padding:0 0 28px 36px;border-left:2px solid var(--line);margin-left:10px}
.tl-item:last-child{border-left-color:transparent;padding-bottom:4px}
.tl-item::before{
  content:"";position:absolute;left:-8px;top:5px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--acc);box-shadow:0 0 0 4px rgba(61,107,244,.12);
}
/* 新动态条目：红点高亮 + 浅红底 */
.tl-item.is-new{border-left-color:rgba(226,59,49,.65)}
.tl-item.is-new::before{
  background:#fff;border-color:var(--red);
  box-shadow:0 0 0 5px rgba(226,59,49,.18);
}
.tl-item.is-new::after{
  content:"";position:absolute;left:-8px;top:5px;width:14px;height:14px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 5px rgba(226,59,49,.3);animation:ringPulse 2.8s ease-in-out infinite;
}
.tl-new{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,#FF6B5E,#E23B31);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:1px;line-height:1;
  padding:3px 9px;border-radius:999px;vertical-align:1px;
  box-shadow:0 3px 10px rgba(212,86,74,.4);align-self:center;
}
.tl-new::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
.tl-item .tl-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tl-item .tl-date{font-family:var(--font-en);font-size:12px;color:var(--acc);letter-spacing:.5px;font-weight:700}
.tl-item .tl-text{font-size:14.5px;color:var(--ink);margin-top:4px;line-height:1.7;white-space:pre-line}
.tl-item .tl-tag{font-size:11px;color:var(--ink-2);border:1px solid var(--line);border-radius:7px;padding:1px 8px;background:rgba(255,255,255,.7)}
.tl-item .tl-del{margin-left:auto;background:none;border:none;color:var(--ink-3);font-size:12px;text-decoration:underline;
  cursor:pointer;padding:2px 4px;opacity:.4;transition:all .18s;align-self:center}
.tl-item .tl-del:hover{color:var(--red);opacity:1}
.tl-item:hover .tl-del{opacity:.9}
.tl-imgs{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.tl-imgs .ph{
  width:132px;height:132px;border-radius:14px;overflow:hidden;cursor:zoom-in;
  border:1px solid var(--line-soft);position:relative;flex:none;
  background:rgba(255,255,255,.6);box-shadow:0 4px 14px rgba(15,23,42,.07);
}
.tl-imgs .ph img{width:100%;height:100%;object-fit:cover;transition:.35s}
.tl-imgs .ph:hover img{transform:scale(1.07)}
.tl-imgs .ph:hover{box-shadow:0 8px 22px rgba(15,23,42,.14)}
.tl-imgs .ph.more::after{content:"+N";position:absolute;inset:0;background:rgba(9,16,30,.66);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}

/* 成品图 */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:14px}
.gallery .ph{aspect-ratio:1;border-radius:14px;overflow:hidden;cursor:zoom-in;border:1px solid var(--line-soft);background:rgba(255,255,255,.6);box-shadow:0 4px 14px rgba(15,23,42,.07)}
.gallery .ph img{width:100%;height:100%;object-fit:cover;transition:.35s}
.gallery .ph:hover img{transform:scale(1.06)}
.gallery .ph:hover{box-shadow:0 10px 26px rgba(15,23,42,.15)}
.finish-note{
  background:linear-gradient(140deg,#1B2B49,#0B1424);
  color:#E7EEFA;border-radius:var(--radius);padding:22px 24px;display:flex;align-items:center;gap:18px;margin-bottom:22px;
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);flex-wrap:wrap;position:relative;overflow:hidden;
}
.finish-note::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#4E77F6,#2B50E0);
}
.finish-note .fn-ico{font-size:28px;color:#9DB4F8;padding-left:6px}
.finish-note b{color:#F4F7FD;font-family:var(--font-en);font-size:20px;margin:0 4px}

/* ---------- 后台 ---------- */
/* minmax 从 180px 提到 240px（v8.32）：
   180px 时「看板总览」10 张卡在 1794px 视口下会挤成 5 列 ≈203px/张，
   减去图标 48 + 左右内边距 44 + 间距 16 后只剩约 95px 给文字，
   副标题（如「成交金额 ÷ 下单客户数（46 人）」）会横向溢出卡片、数字也会折行。
   240px 下同视口回到 4 列 ≈245px，与加这两张卡之前的观感一致，且窄屏规则不受影响。 */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:26px}
.stat{
  background:var(--glass);border:1px solid var(--line-soft);border-radius:16px;padding:20px 22px;
  display:flex;align-items:center;gap:16px;box-shadow:var(--shadow);
}
.stat .si{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none}
.stat .sv{font-family:var(--font-en);font-size:23px;font-weight:700;line-height:1.28;color:var(--ink);letter-spacing:-.4px;overflow-wrap:anywhere}
.stat .sk{font-size:12px;color:var(--ink-3);letter-spacing:1px;margin-top:1px}
.si.gold{background:linear-gradient(140deg,#4E77F6,#2B50E0);color:#fff;box-shadow:0 6px 14px rgba(43,80,224,.28)}
.si.ink{background:#EAF0FA;color:#33518F}
.si.green{background:var(--green-tint);color:var(--green)}
.si.blue{background:var(--blue-tint);color:var(--blue)}
.admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.toolbar-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.toolbar-right .btn{flex:0 0 auto;white-space:nowrap}
.toolbar-right .btn-sm{flex:0 0 auto;white-space:nowrap}
/* 时间区间工具条里的「自定义」日期条（v9 修复错位）
   问题：分段按钮 + 日期条 + 区间说明 三者并排时总宽超过容器（桌面上约需 1129px，实际只有 1080px），
   日期条被 flex-shrink 压到 407px，两个日期框 +「至」+「查询」放不下就换行成两行（高 92px），
   再被 .admin-toolbar 的 align-items:center 垂直居中 —— 于是日期框浮到分段按钮上方、查询按钮掉到下方。
   修法：日期条用 order 排在最后、独占一整行（flex-basis:100%），行内禁止换行、日期框可伸缩。 */
#staffCustom,#boardCustom{order:9;flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap;gap:8px}
#staffCustom .f-input,#boardCustom .f-input{flex:1 1 132px;width:auto;min-width:0;padding:11px 12px;font-size:14px}
#staffCustom .muted,#boardCustom .muted,#staffCustom .btn,#boardCustom .btn{flex:0 0 auto}
/* 后台首页工具条（v8.45）：入口按钮一行 / 筛选一行，改成普通块级堆叠。
   原来是 flex-direction:column + 继承来的 flex-wrap:wrap ——「列向 + 换行」是个不稳定组合
   （WebKit 上会把下一行画进错误的合成层）。块级堆叠没有换行/对齐算法，两行自动撑满宽度，
   行间距用 .at-row + .at-row 的 margin-top 补，视觉与原来一致。 */
#view-admin-home .admin-toolbar{display:block;margin:0 0 12px}
#view-admin-home .at-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#view-admin-home .admin-toolbar>.at-row+.at-row{margin-top:8px}
#view-admin-home .stat-cards{margin-bottom:16px}
/* 后台首页顶部（v8.42）：内容整体上移、统计卡压矮，给下面的订单表让位置 */
#view-admin-home{padding-top:20px}
#view-admin-home .stat{padding:14px 20px}
#view-admin-home .stat .si{width:44px;height:44px;border-radius:12px}
#view-admin-home .at-actions{justify-content:flex-start;position:relative;z-index:2}
/* 入口按钮那一排（成品 / 3D 图 / 价格 / 用户 / 会员 / 工作台 / 看板 / 皮肤 / 新建订单）
   统一 30px 高（v9.8，老板要求更紧凑；原来 40px）。这排全是 .btn-sm，line-height:normal 时按钮高度由
   行内字形决定：✦ 和 emoji 走回退字体、字框比 ¥ ◎ ◆ 高，同一排实测量出 37 / 36 / 35 三种高度。
   这里定死 height + line-height，文字基线也一起对齐。position/z-index（v8.45 沿用）：这一行显式压在
   下面的订单表之上。 */
#view-admin-home .at-actions>.btn{height:30px;line-height:1;padding-top:0;padding-bottom:0}
/* 「已完成图片」属第二排控件（与状态筛选 / 搜索框同排）：整排 35px（v9.8）。
   v9.10：「新建订单」已挪进入口按钮排（老板要求），不再吃这条 35px，随入口排一起 30px。 */
#view-admin-home .at-actions>#btnDoneGallery{height:35px}
/* 状态筛选 / 已完成图片 / 搜索框（v9.6）：并入入口按钮同一行，占右侧空位 ——
   分段与图集按钮定宽，搜索框 flex 撑满行尾，放不下就整块换行；原来它们单独占的一行
   （v8.38 的 at-filter-row grid）就此取消，列表整体上移一行。 */
#view-admin-home .at-actions>.seg{flex:0 0 auto;height:35px}
/* 搜索框与第二排同高 35px（v9.8）：去掉上下内边距，输入框自带垂直居中，避免内容被压扁。 */
#view-admin-home .at-actions>.f-input.search{flex:1 1 220px;width:auto;min-width:180px;height:35px;padding-top:0;padding-bottom:0}

/* 订单表加了「添加时间」列后列更挤（v8.39）：表格左右内边距收一点，
   让「状态」里的徽章保持同一行不折行；只作用于后台首页订单表。 */
/* 订单表与筛选行同属一层，定序在筛选行下面（v8.45） */
#view-admin-home .table-wrap{position:relative;z-index:1}
#view-admin-home .table-wrap thead th{padding-left:12px;padding-right:12px}
#view-admin-home .table-wrap tbody td{padding-left:12px;padding-right:12px}
#view-admin-home .table-wrap tbody td.st-td{white-space:nowrap}
/* 「状态」列用 td.st-td 标记（列表渲染时加在单元格上），不要用 td:nth-child(6)：
   列顺序一改（上次把「完成日期」挪到状态右边就是这样）位置选择器就失配，徽章又会被推到右边。 */
/* 「状态」列的徽章竖排：这一列原先被「剩 N 天 / 超期 N 天」这类小徽章撑到 200px 宽，
   后面的「完成日期」列就离得远、中间空一大片。竖排后状态列收窄，完成日期紧跟状态（2026-10-12 老板要求）。 */
#view-admin-home .table-wrap tbody td.st-td .st-cell{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
/* 竖排时要清掉徽章自带的左边距：.badge 默认 margin-left:auto（卡片右上角用），
   .due-badge 横排时是 margin-left:6px —— 不清掉会把徽章推到右边、和表头「状态」对不齐。 */
#view-admin-home .table-wrap tbody td.st-td .st-cell .badge,
#view-admin-home .table-wrap tbody td.st-td .st-cell .due-badge{margin-left:0}
/* 订单列表「完成日期」列里的「交期」：距交期 ≤5 天（含已超期）标红提醒（2026-10-14 老板要求） */
#adminOrderRows .due-urgent{color:var(--red);font-weight:700}
/* 订单列表 ≤1366px 按「内容宽度」排版（不用 width:100% 撑满）：状态列收窄后多余的宽不再被前面的列吃掉，
   「完成日期」才能真的贴到「状态」右边（2026-10-12 老板要求）。手机上仍由 .table-wrap 横向滚动兜底。 */
#adminTableWrap table{width:auto}
/* 宽屏（≥1367px）改回撑满卡片（2026-10-13 老板报的 bug）：
   用 width:auto 时整表总比卡片短一截（实测差 30~80px，随当前数据内容浮动），
   于是表头灰条 / 行分隔线 / hover 全在卡片中间断掉、右边留一条白，左边缘也和工具栏的搜索框对不齐，
   看着像表格被截断；翻到下一批（懒渲染）表格宽度还会跳一下。
   宽屏下多出来的宽度最多 ~32px（卡片上限 1080px），摊到各列每列只多 1~3px，「完成日期」照样紧贴「状态」。
   ≤1366 仍走上面的 width:auto + overflow-x:auto：窄屏撑满会把列挤到换行。 */
@media (min-width:1367px){#adminTableWrap table{width:100%}}
.seg{display:inline-flex;background:#EDF1F7;border-radius:12px;padding:4px;gap:2px}
.seg-btn{border:none;background:none;padding:8px 22px;border-radius:9px;font-size:13.5px;color:var(--ink-2);letter-spacing:1px;transition:.2s;font-weight:700}
.seg-btn:hover{color:var(--ink)}
.seg-btn.on{background:#fff;color:var(--acc);box-shadow:0 2px 8px rgba(15,23,42,.12)}

.table-wrap{
  background:var(--glass);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);
}
/* 平板横屏这一档（1025–1366px，含 iPad 1080×810）订单表比卡片宽 25px，
   最右「删除」按钮的右边被裁掉一点（v8.46）。两件事一起做：
   ① 该表单元格左右内边距 12px → 10px：整表 1063px → 1036px，1080 下正好落回容器（1040px）里，
      行高不变（第一行仍是 88px，订单标题不折行）；
   ② 兜底允许横向滚动：万一某台设备字体更宽，也能滑出来看，而不是被裁掉。
   1024 及以下本来就开着 overflow-x:auto（见下方手机/平板区块），桌面 >1366px 不变。
   ⚠ 这段必须放在上面 .table-wrap{} 之后，否则 overflow-x 会被它盖回 hidden。 */
@media (min-width:1025px) and (max-width:1366px){
  .table-wrap{overflow-x:auto}
  #view-admin-home .table-wrap thead th,
  #view-admin-home .table-wrap tbody td{padding-left:10px;padding-right:10px}
}
table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;font-size:11px;color:var(--ink-2);letter-spacing:1.5px;font-weight:700;
  padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(15,23,42,.025);white-space:nowrap;
  font-family:var(--font-en);
}
tbody td{padding:13px 16px;border-bottom:1px solid var(--line-soft);font-size:13.5px;vertical-align:middle}
tbody tr{transition:background .15s;cursor:pointer}
tbody tr:hover{background:rgba(61,107,244,.04)}
tbody tr:last-child td{border-bottom:none}
.td-main{display:flex;align-items:center;gap:13px;min-width:200px}
.td-main .mini-thumb{width:44px;height:44px;border-radius:11px;overflow:hidden;flex:none;background:linear-gradient(150deg,#F4F7FC,#E9EEF7);display:flex;align-items:center;justify-content:center}
.td-main .mini-thumb .noimg{font-family:var(--font-en);color:#9FB0CF;font-size:18px}
.td-main .mini-thumb img{width:100%;height:100%;object-fit:cover}
.td-title{font-weight:700;font-size:14px;line-height:1.35;color:var(--ink)}
/* 「名字」字段（2026-10-13 老板要求）：客户 / 用户 / 会员三个列表的名字统一用这一条 ——
   纯黑加粗，比旁边的浅灰小字（.td-code，「跟单：xxx」那行）显眼。 */
.td-name{font-weight:700;font-size:14px;line-height:1.35;color:#000;margin-top:2px}
.td-code{font-family:var(--font-en);font-size:11px;color:var(--ink-3);letter-spacing:.5px;margin-top:2px}
.td-num{font-family:var(--font-en);white-space:nowrap}
/* 订单表「客户」列：客户名后面的会员等级小标（沿用会员管理 .ms-lvtag 的配色，字号贴齐 .td-code 那一行） */
.td-lv{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:6px;background:var(--acc-tint);color:var(--acc-2);font-family:var(--font-cn);font-size:11px;font-weight:600;letter-spacing:0;vertical-align:1px}

/* 弹窗（舒缓 v8.21） */
.modal-mask{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(10,17,32,.44);
  backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25);
  animation:fadeIn .35s ease-out;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--glass-strong);border-radius:18px;width:100%;max-width:640px;max-height:92vh;
  overflow:auto;padding:28px 30px;border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-lg);animation:pop .45s cubic-bezier(.16,1,.3,1);
}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(16px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modal-head h3{font-size:18px;letter-spacing:2px}
.icon-btn{background:none;border:none;font-size:16px;color:var(--ink-3);width:36px;height:36px;border-radius:10px;transition:background .2s,color .2s}
.icon-btn:hover{background:var(--acc-tint);color:var(--ink)}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line-soft)}
.thumb-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.thumb-empty{
  width:88px;height:88px;border:1.5px dashed var(--line);border-radius:14px;background:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-3);
  font-size:12px;text-align:center;line-height:1.6;transition:.2s;
}
.thumb-empty:hover{border-color:var(--acc);color:var(--acc)}
.thumb-preview{width:88px;height:88px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}

/* 后台详情：上传区 */
.upload-card{
  background:rgba(255,255,255,.6);border:1.5px dashed var(--line);border-radius:var(--radius);padding:24px;
  margin-bottom:22px;
}
.upload-card h4{font-size:14.5px;letter-spacing:2px;margin-bottom:4px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.upload-card h4 svg{color:var(--acc)}
.upload-card .u-sub{font-size:12px;color:var(--ink-3);margin-bottom:16px}
.up-img-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.up-ph{position:relative;width:90px;height:90px;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft)}
.up-ph img{width:100%;height:100%;object-fit:cover}
.up-ph .del{
  position:absolute;top:4px;right:4px;width:21px;height:21px;border-radius:50%;
  background:rgba(9,16,30,.7);color:#fff;border:none;font-size:11px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.up-ph .del:hover{background:var(--red)}
.up-ph.is-cover{border:2px solid var(--acc);box-shadow:0 0 0 3px rgba(61,107,244,.14)}
.up-ph .cover-tag{
  position:absolute;left:4px;bottom:4px;background:var(--acc);color:#fff;font-size:10px;
  padding:1px 7px;border-radius:999px;font-weight:700;letter-spacing:.5px;pointer-events:none;
}
.up-add{
  width:90px;height:90px;border:1.5px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--ink-3);font-size:11px;cursor:pointer;transition:.2s;
}
.up-add:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-tint)}
.up-add b{font-size:22px;line-height:1;font-weight:300;color:var(--acc)}
/* 上传作品弹窗：「作品媒体 / 费用单」并排（窄屏自动换行成上下两栏） */
.wf-media-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.wf-media-col{flex:1 1 232px;min-width:0}
.wf-media-col .up-img-grid{margin-top:10px}
.upload-actions{display:flex;justify-content:flex-end;margin-top:18px;gap:10px}

/* 状态流转按钮 */
.stage-set{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.stage-btn{
  border:1px solid var(--line);background:rgba(255,255,255,.75);border-radius:10px;padding:9px 20px;
  font-size:13px;color:var(--ink-2);transition:.2s;letter-spacing:1px;
}
.stage-btn:hover{border-color:var(--acc);color:var(--acc)}
.stage-btn.on{
  background:linear-gradient(135deg,#4E77F6,#2B50E0);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(43,80,224,.3);font-weight:700;
}
.stage-btn.done-stage.on{
  background:linear-gradient(135deg,#3E9E78,#216B52) !important;color:#fff !important;
  box-shadow:0 6px 16px rgba(33,107,82,.28) !important;
}

/* 灯箱 */
.lightbox{
  position:fixed;inset:0;background:rgba(8,14,28,.6);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:84px 4vw 4vh;cursor:zoom-out;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:fadeIn .35s ease-out;
}
#lightboxBox{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* 顶部 84px 是给「下载条」留的位置（.lb-bar 绝对定位在 top:24px、高约 45px）：
   原来上下都是 4vh，而图最高能到 88vh，于是竖图会顶到 24px 那儿 ——
   下载条直接压在照片上（窗口越矮压得越多，实测 940/800/700 高分别压 14 / 24 / 30px），
   截图里看着就是「一条黑条糊在图片顶上」。这里留出位置 + 图片改用容器高度（不再写死 88vh），
   图片就永远在下载条下面，点开进度图不会被挡。 */
#lightboxBox img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 24px 90px rgba(5,10,22,.5)}
.lb-svg{display:flex;align-items:center;justify-content:center}
/* 放大镜：图片可捏合/双击缩放，放大后可拖动 */
#lightboxBox img,.lb-svg{transform-origin:center center;transition:transform .18s ease-out;touch-action:none;will-change:transform}
#lightboxBox.lb-dragging img,#lightboxBox.lb-dragging .lb-svg{transition:none}
@keyframes lbZoom{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:scale(1)}}
/* 同上：竖版 SVG（3D 白底图）也要卡在高度的可用区里，别伸到下载条底下（96vh = 100vh - 顶部 84px - 底部 4vh） */
.lb-svg svg{width:min(88vw,860px);height:auto;max-height:calc(96vh - 84px);background:#fff;border-radius:14px;box-shadow:0 24px 90px rgba(5,10,22,.5)}
.lb-close{position:absolute;top:22px;right:30px;color:#fff;font-size:26px;opacity:.9;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.lb-close:hover{opacity:1;background:rgba(255,255,255,.26)}
/* 灯箱下载条（v9.2）：左边显示要保存的文件名，右边「下载原图」 */
.lb-bar{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;max-width:min(76vw,720px);
  padding:7px 9px 7px 16px;border-radius:999px;
  background:rgba(12,20,38,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);color:#fff;cursor:default;
}
.lb-name{font-size:12.5px;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw;font-family:var(--font-en)}
.lb-btn{
  flex:none;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:#fff;
  border-radius:999px;padding:7px 15px;font-size:12.5px;font-family:var(--font-cn);font-weight:700;
  cursor:pointer;transition:background .18s,border-color .18s,transform .18s;
}
.lb-btn:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.5);transform:translateY(-1px)}
/* 步骤图右上角的「下载这张图」小按钮：平时淡一点，悬停变实，手机上一直看得见 */
.ph-dl{
  position:absolute;top:6px;right:6px;z-index:2;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);background:rgba(9,16,30,.55);color:#fff;
  font-size:12px;line-height:1;cursor:pointer;opacity:.55;transition:opacity .18s,background .18s,transform .18s;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
}
.ph-dl:hover{opacity:1;background:rgba(43,80,224,.92);transform:scale(1.06)}
.tl-imgs .ph:hover .ph-dl{opacity:1}
@media (hover:none){ .ph-dl{opacity:.92;width:30px;height:30px;font-size:13px} }
/* 可点击放大的图（订单缩略图） */
.zoomable{cursor:zoom-in;transition:box-shadow .18s,transform .18s}
.zoomable:hover{box-shadow:0 8px 22px rgba(60,50,35,.18);transform:translateY(-1px)}

/* SVG data-URI 图片的兼容渲染：直接内联进 DOM */
.svg-box{display:block;width:100%;height:100%}
.svg-box svg{display:block;width:100%;height:100%}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);
  background:rgba(10,17,32,.92);color:#EEF3FB;padding:13px 28px;border-radius:12px;font-size:14px;
  box-shadow:var(--shadow-lg);z-index:300;opacity:0;transition:opacity .3s,transform .3s;letter-spacing:.5px;
  max-width:90vw;text-align:center;display:block;
  border:1px solid rgba(255,255,255,.12);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:linear-gradient(135deg,rgba(22,42,68,.97),rgba(20,88,66,.97))}
.toast.err{background:linear-gradient(135deg,rgba(158,45,38,.97),rgba(110,26,20,.97))}

/* ---------- 成品展示 Works ---------- */
.top-link{position:relative;font-size:13px;color:var(--acc);font-weight:600;letter-spacing:1px;border-bottom:1px dashed var(--acc-line);padding-bottom:1px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.top-link:hover{color:var(--acc-2)}
/* 触控热区：不改变视觉，只把可点范围上下扩大到 ~43px */
.top-link::before{content:"";position:absolute;inset:-10px -4px}
.works-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.works-head h2{font-size:24px;letter-spacing:1px}
.u-note{
  background:rgba(255,255,255,.65);border:1.5px dashed var(--line);color:var(--ink-2);
  border-radius:12px;padding:10px 14px;font-size:12.5px;margin-bottom:18px;line-height:1.7;
}
/* 提醒型提示块（未填写添加时间等） */
.u-note.warn{background:rgba(247,239,225,.78);border-color:rgba(180,120,15,.5);color:#8A5D0B}
.u-note.warn b{color:var(--red)}
.u-note.newcust{background:var(--blue-tint);border-color:var(--acc-line);color:var(--ink-2);font-size:13px}
.u-note.newcust b{color:var(--acc-2);font-size:14px}
.u-note.newcust .muted{font-size:12px;color:var(--ink-3)}
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:18px;align-items:start}
/* 成品展示：搜索条 + 触底加载（v8.18） */
.works-tools{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.w-search{position:relative;flex:0 1 min(460px,100%)}
.w-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:#9AA9C6;pointer-events:none}
.w-sinput{width:100%;padding:10px 38px 10px 38px;border-radius:12px;font-size:13.5px}
.w-clear[hidden],.works-more[hidden]{display:none}
.w-clear{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;border-radius:50%;
  background:transparent;color:#9AA9C6;font-size:13px;line-height:1;cursor:pointer;transition:.18s;display:flex;align-items:center;justify-content:center;
}
.w-clear:hover{background:rgba(61,107,244,.12);color:var(--acc)}
.w-hint{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.works-more{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-3);font-size:12.5px;padding:26px 0 6px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(61,107,244,.2);border-top-color:var(--acc);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wcard{
  background:var(--glass);border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;
  cursor:pointer;transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1),border-color .4s cubic-bezier(.22,.61,.36,1);
  box-shadow:var(--shadow);
}
.wcard:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(23,40,74,.16);border-color:rgba(61,107,244,.35)}
.wcard:active{transform:translateY(-2px) scale(.995)}
.wc-media{position:relative;aspect-ratio:3/4;background:linear-gradient(150deg,#F2F5FA,#E7EDF6);display:flex;align-items:center;justify-content:center;overflow:hidden}
.wc-media .svg-box svg,.wc-media img{width:100%;height:100%;object-fit:cover}
.wc-n{position:absolute;right:10px;bottom:10px;background:rgba(9,16,30,.68);color:#fff;font-size:11px;padding:2px 10px;border-radius:999px;letter-spacing:.5px}
.wc-del{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(9,16,30,.72);color:#fff;font-size:13px;cursor:pointer;z-index:3;transition:.2s}
.wc-del:hover{background:var(--red);transform:scale(1.08)}
.wc-edit{position:absolute;top:10px;left:10px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(9,16,30,.72);color:#fff;font-size:13px;cursor:pointer;z-index:3;transition:.2s}
.wc-edit:hover{background:var(--acc);transform:scale(1.08)}
.wc-body{padding:15px 17px 17px}
.wcat{display:inline-block;font-size:11px;color:var(--acc);background:var(--acc-tint);border-radius:7px;padding:2px 9px;font-weight:700;letter-spacing:1px}
.wc-title{margin:8px 0 4px;font-size:15.5px;font-weight:800;line-height:1.4}
.wc-desc{color:var(--ink-3);font-size:12.5px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 作品查看器 */
.wv-card{
  width:min(900px,calc(100% - 40px));background:var(--glass-strong);border-radius:18px;padding:24px 26px 20px;
  border:1px solid rgba(255,255,255,.92);box-shadow:var(--shadow-lg);
  max-height:92vh;overflow:auto;animation:wvPopIn .58s cubic-bezier(.16,1,.3,1);
}
.wv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.wv-top h3{font-size:19px;letter-spacing:.5px;margin-bottom:6px}
/* 媒体主框架：宽高比随媒体真实比例（--ar），黑边为零；
   宽度取「容器满宽」与「76vh 高度对应宽度」的较小值 → 竖屏自动收窄居中，横屏撑满 */
.wv-main{margin-top:14px;display:flex;align-items:center;justify-content:center}
.wv-frame{
  --ar:4/3;
  position:relative;width:min(100%,calc(76vh * var(--ar)));
  aspect-ratio:var(--ar);border-radius:14px;overflow:hidden;flex:none;
  background:#070B14;border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
}
.wv-frame.is-img{background:#fff;cursor:zoom-in}
.wv-frame img,.wv-frame .svg-box,.wv-frame .svg-box svg{width:100%;height:100%;object-fit:contain}
.wv-frame video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.wv-zoom{position:absolute;right:12px;bottom:12px;background:rgba(9,16,30,.66);color:#fff;font-size:11.5px;padding:3px 11px;border-radius:999px;letter-spacing:1px}
/* 视频自动播放被浏览器拦截时的「点击播放」浮层（手机端 iOS 等场景兜底） */
.wv-tap-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;
  display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;
  background:rgba(9,16,30,.82);color:#fff;font-size:15px;letter-spacing:1.5px;
  padding:13px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.38);
  box-shadow:0 10px 28px rgba(5,10,22,.45);backdrop-filter:blur(6px);transition:.2s;
}
.wv-tap-play:hover{background:rgba(61,107,244,.9)}
.wv-thumbs{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap}
.wv-thumb{width:72px;height:72px;border-radius:11px;overflow:hidden;cursor:pointer;opacity:.72;border:2px solid transparent;transition:.2s;background:rgba(255,255,255,.7)}
.wv-thumb .svg-box svg,.wv-thumb img{width:100%;height:100%;object-fit:cover}
.wv-thumb:hover{opacity:1}
.wv-thumb.on{border-color:var(--acc);opacity:1;box-shadow:0 4px 12px rgba(43,80,224,.22)}
.wv-desc{margin-top:16px;color:var(--ink-2);font-size:13.5px;line-height:1.8;white-space:pre-line}
.wv-foot{margin-top:12px;display:flex;justify-content:flex-end}

/* ---- 作品查看器 · 优雅开合动效（v8.13 / v8.21 舒缓化）----
   打开：遮罩长缓淡入（.modal-mask 自带 fadeIn .35s）+ 卡片从下方缓缓浮起、轻微放大；
   关闭：遮罩缓淡出 + 卡片舒缓下沉收起，动效结束后 JS 才真正隐藏。 */
#workViewer .wv-card{animation:wvPopIn .58s cubic-bezier(.16,1,.3,1) both}
@keyframes wvPopIn{
  from{opacity:0;transform:translateY(36px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
#workViewer.closing{animation:wvMaskOut .4s ease forwards;pointer-events:none}
#workViewer.closing .wv-card{animation:wvPopOut .4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes wvMaskOut{from{opacity:1}to{opacity:0}}
@keyframes wvPopOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(18px) scale(.97)}
}
@media (prefers-reduced-motion:reduce){
  .view,.modal-mask,.modal,.lightbox,#lightboxBox img,.lb-svg{animation:none}
  .new-flag::after,.step.cur .sd::after,.tl-item.is-new::after{animation:none}
  #workViewer .wv-card,#workViewer.closing,#workViewer.closing .wv-card{animation:none}
}

/* ---------- 响应式 ---------- */
/* 平板 + 手机（≤1024）：行内操作按钮加大点击区；表格容器可横滑兜底（内容放得下时不出现滑动） */
@media (max-width:1024px){
  .row-btn{padding:9px 14px;font-size:13px}
  .table-wrap{overflow-x:auto}
}
/* 平板（761–1024）：收紧表格，让 7 列一屏放得下，不用左右滑 */
@media (min-width:761px) and (max-width:1024px){
  thead th{padding:13px 9px}
  tbody td{padding:12px 9px;font-size:13px}
  .td-main{min-width:0;gap:11px}
  .td-main .mini-thumb{width:38px;height:38px;border-radius:9px}
  .td-code{letter-spacing:0}
  .badge{padding-left:9px;padding-right:9px}
  .row-btn{padding:8px 11px;font-size:12.5px}
}
@media (max-width:760px){
  .topbar-inner{height:60px;padding:0 14px}
  .brand-sub{display:none}
  .view{padding:24px 14px 54px}
  /* 移动端压缩门户标题区，把入口卡整体上提（v8.2） */
  .portal-hero{padding:22px 16px 30px}
  .portal-orn{font-size:11px;letter-spacing:0;margin-bottom:8px}
  .portal-hero h1{font-size:clamp(20px,5.6vw,24px);letter-spacing:4px;text-indent:4px;line-height:1.25}
  .portal-hero h1 em{font-size:11.5px;letter-spacing:3px;margin-top:5px;line-height:1.5}
  .portal-hero h1::after{width:36px;height:2px;margin:13px auto 0}
  .portal-sub{font-size:12.5px;line-height:1.6;margin:12px auto 20px;padding:0 4px}
  .portal-cards{gap:16px}
  .portal-entry{flex:1 1 100%;max-width:none}
  .order-grid{grid-template-columns:1fr}
  .detail-card{padding:20px 17px}
  .dc-thumb{width:78px;height:78px}
  .form-grid{grid-template-columns:1fr}
  .span2{grid-column:span 1}
  .table-wrap{overflow-x:auto}
  table{min-width:760px}
  .tl-item{padding-left:26px;margin-left:7px}
  .stat-cards{grid-template-columns:repeat(2,1fr)}
  .topbar-who{display:none}
  .auth-view{min-height:calc(100vh - 150px);padding:28px 16px 40px}
  .auth-card{padding:28px 24px}
  .toolbar-right{width:100%;flex-wrap:wrap}
  .toolbar-right .f-input.search{flex:1}
  .steps .sl{font-size:11px}
  /* ---- 手机端成品展示：一行 3 列，卡片紧凑（v8.6） ---- */
  .works-grid{grid-template-columns:repeat(3,1fr);gap:9px}
  .works-tools{margin-bottom:12px}
  .w-search{flex:1 1 100%}
  .w-hint{display:none}
  .wcard{border-radius:13px}
  .wc-media{border-radius:0}
  .wc-body{padding:9px 9px 10px}
  .wcat{font-size:10px;padding:1px 6px}
  .wc-title{margin:6px 0 0;font-size:12.5px;font-weight:800;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .wc-desc{display:none}
  .wc-n{right:6px;bottom:6px;font-size:10px;padding:1px 7px}
  .wc-del{top:6px;right:6px;width:30px;height:30px;font-size:12px}
  .wc-edit{top:6px;left:6px;width:30px;height:30px;font-size:12px}
  /* ---- 手机端查看器：媒体占满内容宽，消除两侧大片留白（v8.6）；卡片贴边放大、遮罩只留 8px 空隙（v8.30） ---- */
  #workViewer{padding:8px}
  .wv-card{padding:14px 12px 14px;border-radius:15px;width:100%}
  .wv-top h3{font-size:16px;margin-bottom:5px}
  .wv-main{margin-top:10px}
  .wv-frame{width:100%}
  .wv-zoom{right:9px;bottom:9px;font-size:11px;padding:2px 10px}
  .wv-thumb{width:56px;height:56px;border-radius:10px}
  .wv-desc{margin-top:12px;font-size:12.5px;line-height:1.75}
  .wv-foot{margin-top:9px}
}
/* 手机小屏：卡片内部进一步收紧，让两张入口卡尽量落在首屏 */
@media (max-width:560px){
  .portal-hero{padding:16px 12px 24px}
  /* 首屏尽量塞下三张入口卡（2026-10-15）：只收紧间距与尺寸，文案一条不删 */
  .portal-hero{padding:10px 12px 18px}
  .portal-hero h1::after{margin:8px auto 0}
  .portal-sub{margin:6px auto 12px;line-height:1.5}
  .portal-cards{gap:12px}
  .portal-entry{padding:14px 16px 12px}
  .pe-top{gap:12px}
  .pe-ico{width:44px;height:44px;border-radius:12px}
  .pe-title{font-size:18px}
  .pe-sub{font-size:12px;margin-top:3px}
  .pe-desc{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:12.5px;line-height:1.5}
  .pe-btn{width:100%;text-align:center;margin-top:11px;padding:8px 16px;font-size:13.5px}
  .kv-row{gap:20px 24px}
  /* 手机小卡与查看器进一步收紧 */
  .works-grid{gap:7px}
  .wc-title{font-size:11.5px}
  .wv-thumb{width:50px;height:50px}
  .wv-top h3{font-size:15px}
}

/* ---------- v5.2 视频媒体 ---------- */
.wc-media video{width:100%;height:100%;object-fit:cover}
.wcat.has-video{background:#101B2E;color:#E9EFF9;margin-left:2px}
/* 「费用单」（仅后台可见，2026-10-14）：作品查看器里的标题标签 / 缩略图角标 */
.wcat.is-cost{background:#8A5A00;color:#FFF6E5;margin-left:2px}
.wv-thumb.is-cost{position:relative;border-color:#E3BE7E}
.wv-thumb.is-cost.on{border-color:#C9922F;box-shadow:0 4px 12px rgba(201,146,47,.28)}
.wv-thumb .t-cost{position:absolute;left:0;right:0;bottom:0;background:rgba(138,90,0,.88);color:#FFF6E5;font-size:9px;line-height:1.5;text-align:center;letter-spacing:.5px}
.wv-thumb video{width:100%;height:100%;object-fit:cover;background:#070B14}
.wv-thumb{position:relative}
.t-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:10px;width:22px;height:22px;border-radius:50%;background:rgba(7,11,20,.6);display:flex;align-items:center;justify-content:center;padding-left:2px;pointer-events:none}
.up-ph video{width:100%;height:100%;object-fit:cover;background:#070B14}
.ph-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:9px;width:22px;height:22px;border-radius:50%;background:rgba(7,11,20,.6);display:flex;align-items:center;justify-content:center;padding-left:2px;pointer-events:none}

/* ---------- 批量上传进度浮层（v8.24） ---------- */
.batch-mask{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(6,10,20,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.batch-card{width:min(340px,88vw);background:var(--glass);border:1px solid var(--line-soft);border-radius:16px;padding:20px 20px 16px;box-shadow:var(--shadow-lg)}
.batch-top{display:flex;align-items:baseline;gap:10px}
.batch-top b{font-size:20px;font-family:var(--font-en);color:var(--acc)}
.batch-top span{font-size:13.5px;font-weight:700;color:var(--ink)}
.batch-file{margin:9px 0 12px;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px}
.batch-prog{height:7px;border-radius:6px;background:rgba(120,140,170,.18);overflow:hidden}
.batch-prog i{display:block;height:100%;width:4%;border-radius:6px;background:linear-gradient(90deg,var(--acc),var(--acc-2,var(--acc)));transition:width .25s ease}
.batch-sub{margin-top:10px;font-size:11px;line-height:1.6;color:var(--ink-3)}
@media (prefers-reduced-motion: reduce){.batch-mask{transition:none}}

/* ---------- 3D 效果图类目（含报价 · 需登录查看） ---------- */
.dg-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.dg-card{
  position:relative;background:var(--glass);border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;
  cursor:pointer;box-shadow:var(--shadow);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1),border-color .4s cubic-bezier(.22,.61,.36,1);
}
.dg-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(23,40,74,.16);border-color:rgba(61,107,244,.35)}
.dg-card:active{transform:translateY(-2px) scale(.995)}
.dg-thumb{position:relative;aspect-ratio:1/1;background:linear-gradient(150deg,#F2F5FA,#E7EDF6);display:flex;align-items:center;justify-content:center;overflow:hidden}
.dg-thumb img,.dg-thumb .svg-box,.dg-thumb .svg-box svg{width:100%;height:100%;object-fit:cover}
.dg-count{position:absolute;right:10px;bottom:10px;background:rgba(9,16,30,.68);color:#fff;font-size:11px;padding:2px 10px;border-radius:999px;letter-spacing:.5px}
.dg-body{padding:13px 15px 15px}
.dg-title{font-size:14.5px;font-weight:800;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dg-cat{display:inline-block;margin-top:7px;font-size:11px;color:var(--acc);background:var(--acc-tint);border-radius:7px;padding:2px 9px;font-weight:700;letter-spacing:1px}
.dg-price{display:inline-block;margin-top:9px;font-size:13px;font-weight:800;color:var(--acc-2);letter-spacing:.3px}
.dg-price .muted{color:var(--ink-3);font-weight:600}
.dg-price-lg{
  display:inline-block;margin-top:16px;font-size:17px;font-weight:800;letter-spacing:.5px;
  color:var(--acc-2);background:var(--acc-tint);border:1px solid var(--acc-line);border-radius:11px;padding:9px 18px;
}
/* 分类快捷标签 */
.dg-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.dg-chip{
  font-size:12px;color:var(--ink-2);background:#F1F4F9;border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;cursor:pointer;user-select:none;transition:.18s;
}
.dg-chip:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-tint)}
.dg-chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
/* 移动端：3D 图一行 3 列，与成品展示保持一致 */
@media (max-width:720px){
  .dg-grid{grid-template-columns:repeat(3,1fr);gap:9px}
  .dg-card{border-radius:13px}
  .dg-thumb{border-radius:0}
  .dg-body{padding:9px 9px 10px}
  .dg-title{font-size:12.5px;font-weight:800;line-height:1.35}
  .dg-cat{font-size:10px;padding:1px 6px;margin-top:6px}
  .dg-price{font-size:11.5px;margin-top:6px}
  .dg-count{right:6px;bottom:6px;font-size:10px;padding:1px 7px}
  .dg-price-lg{font-size:15px;padding:7px 14px}
}
@media (max-width:560px){
  .dg-grid{gap:7px}
  .dg-title{font-size:11.5px}
}

/* ---------- 3D 图：参数与报价（查看器右侧明细 + 弹窗参数编辑） ---------- */
.ta-r{text-align:right}
.dg-wait{color:#C07A2E;font-style:normal;font-size:11.5px}
.dg-warn{color:var(--red)}
.wv-card.wv-wide{max-width:1140px}
.dg-view{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:24px;align-items:start;margin-top:14px}
.dg-view-media .wv-frame{width:100%}
.dg-view-media .wv-thumbs{margin-top:11px}
.dg-note-tip{margin:14px 0 0;padding:9px 12px;border-radius:9px;background:#FFF7E8;border:1px solid #F2DCB0;
  color:#8A5A2B;font-size:12.5px;line-height:1.6;font-weight:600}
.dg-note-tip::before{content:"\26A0";margin-right:6px;font-weight:400}
.dg-note-x{margin:10px 0 0;padding:11px 13px;border-radius:9px;background:#F7F8FA;border:1px solid #E4E7ED;color:#4A5568;font-size:12px;line-height:1.75}
.dg-note-x b{display:block;color:#2D3748;font-size:12.5px;margin-bottom:5px}
.dg-note-x p{margin:0 0 4px}
.dg-note-x p:last-child{margin-bottom:0}
.dg-note-x i{font-style:normal;display:inline-block;margin-right:6px;padding:0 6px;border-radius:4px;background:#EDEFF3;color:#5A6472;font-size:11px;font-weight:700}
/* 右侧参数表 */
.dg-spec{min-width:0}
.dg-kv{width:100%;border-collapse:collapse;font-size:13px}
.dg-kv th{text-align:left;font-weight:700;color:var(--ink-3);width:76px;padding:5px 0;vertical-align:top;white-space:nowrap}
.dg-kv td{color:var(--ink);padding:5px 0;word-break:break-word}
.dg-sec{margin:16px 0 8px;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:1px;padding-top:12px;border-top:1px solid var(--line-soft)}
.dg-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.dg-tbl th{background:#F4F7FB;color:var(--ink-3);font-weight:700;font-size:11.5px;padding:7px 8px;text-align:left;white-space:nowrap}
.dg-tbl td{padding:7px 8px;border-top:1px solid var(--line-soft);color:var(--ink-2)}
.dg-tbl tr.dg-na td{color:#8E99AB;background:rgba(247,239,225,.42)}
.dg-sum{margin-top:16px;background:#F7F9FC;border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px}
.dg-sum-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink-2);padding:4px 0}
.dg-sum-row b{font-family:var(--font-en);color:var(--ink)}
.dg-sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:8px;padding-top:10px;border-top:1px dashed var(--line);font-size:13.5px;font-weight:800;color:var(--ink)}
.dg-sum-total b{font-family:var(--font-en);font-size:20px;color:var(--acc-2)}
.dg-sum-total i{margin-left:8px;font-weight:600}
/* 弹窗里的参数编辑器 */
#designModal .modal{max-width:860px}
.dg-spec-box{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft)}
.dg-spec-hd,.dg-sec-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dg-spec-hd b{font-size:14.5px;letter-spacing:1px}
.dg-sec-hd{margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line-soft)}
.dg-sec-hd b{font-size:13px;letter-spacing:1px;color:var(--ink)}
.dg-rows-hd{display:grid;grid-template-columns:100px 128px 68px 118px minmax(70px,1fr) 30px;gap:7px;font-size:11px;color:var(--ink-3);font-weight:700;padding:0 0 5px}
.dg-rows{display:flex;flex-direction:column;gap:7px}
.dg-row{display:grid;grid-template-columns:100px 128px 68px 118px minmax(70px,1fr) 30px;gap:7px;align-items:center}
.dg-row .f-input{padding:8px 9px;font-size:12.5px}
.dgr-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;font-size:12px;font-weight:800;color:var(--ink);font-family:var(--font-en);text-align:right}
.dgr-sub .dgr-amt{white-space:nowrap}
.dgr-sug{cursor:pointer;font-size:11px;font-weight:700;color:var(--acc-2);background:var(--acc-tint);border-radius:7px;padding:1px 6px;white-space:nowrap}
.dgr-sug:hover{background:var(--acc);color:#fff}
.dg-approx{font-style:normal;font-size:10px;font-weight:700;color:#8A7593;background:#F1ECF6;border-radius:5px;padding:1px 5px;vertical-align:1px}
.dg-approx-cross{color:#8A5A2B;background:#FBF0E2}
.dgr-del{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink-3);font-size:12px;line-height:1;transition:.18s}
.dgr-del:hover{border-color:var(--red);color:var(--red);background:var(--red-tint)}
.dg-empty{font-size:12px;color:var(--ink-3);background:#F7F9FC;border:1px dashed var(--line);border-radius:10px;padding:12px}
.dg-calc{margin-top:14px;background:#F7F9FC;border:1px solid var(--line-soft);border-radius:12px;padding:11px 14px;font-size:12.5px}
.dg-calc-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;color:var(--ink-2)}
.dg-calc-row b{font-family:var(--font-en);color:var(--ink)}
.dg-calc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:7px;padding-top:9px;border-top:1px dashed var(--line);font-weight:800;color:var(--ink)}
.dg-calc-total b{font-family:var(--font-en);font-size:19px;color:var(--acc-2)}
/* ---------- 后台：价格设置页 ---------- */
.pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-bottom:26px}
.pr-card{background:var(--glass);border:1px solid var(--line-soft);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow)}
.pr-card h4{font-size:15px;letter-spacing:1px;margin-bottom:6px}
.pr-sub{font-size:12.5px;color:var(--ink-3);line-height:1.7;margin-bottom:14px}
.pr-gold-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pr-gold-mat{width:78px;flex:none;font-size:13px;font-weight:700;color:var(--ink)}
.pr-gold-unit{font-size:12px;color:var(--ink-3);flex:none}
.pr-gold-row .f-input{padding:9px 11px}
.pr-gold-new{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.pr-gold-new .f-input{flex:1}
.pr-import{display:flex;gap:10px;flex-wrap:wrap}
.pr-counts{display:flex;gap:12px;margin-top:16px}
.pr-count{flex:1;background:#F7F9FC;border:1px solid var(--line-soft);border-radius:12px;padding:11px 14px;text-align:center}
.pr-count b{display:block;font-family:var(--font-en);font-size:21px;color:var(--acc-2)}
.pr-count span{font-size:11.5px;color:var(--ink-3)}
.pr-imp-result{margin-top:14px;font-size:12.5px;color:var(--green);background:var(--green-tint);border-radius:10px;padding:11px 13px;line-height:1.7}
.pr-shapes{margin-top:5px;color:var(--ink-2);font-size:11.5px}
.pr-err{margin-top:6px;color:var(--orange)}
.pr-table-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.pr-table-head h4{font-size:15px;letter-spacing:1px}
.pr-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pr-filters .f-input{padding:9px 11px;width:auto;min-width:130px}
.pr-addrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#F7F9FC;border:1px dashed var(--line);border-radius:12px;padding:12px;margin-bottom:12px}
.pr-addrow .f-input{padding:9px 10px;width:auto;flex:1;min-width:96px}
.pr-foot{margin-top:10px;font-size:12px;color:var(--ink-3)}
.dw-tbl{width:100%;border-collapse:collapse;font-size:13px}
.dw-tbl th{background:#F4F7FB;color:var(--ink-2);font-size:12px;font-weight:700;padding:10px 10px;text-align:left;white-space:nowrap;position:sticky;top:0}
.dw-tbl td{padding:7px 10px;border-top:1px solid var(--line-soft)}
.dw-tbl tr.dw-flash{background:var(--green-tint)}
.dw-muted{color:var(--ink-3);font-size:12px;white-space:nowrap}
.dw-price{padding:7px 9px;width:112px;text-align:right}
.dw-del-cell{width:40px}
@media (max-width:860px){
  .dg-view{grid-template-columns:1fr;gap:14px}
  .dg-rows-hd{display:none}
  .dg-row{grid-template-columns:1fr 1fr;gap:7px}
  .dg-row .dgr-sub{grid-column:1;text-align:left}
  .dg-row .dgr-del{grid-column:2;justify-self:end}
  .pr-addrow .f-input{min-width:120px}
}

/* ---------- 3D 图库：按图片原始比例排版（横图横、竖图竖，不裁切） ---------- */
.dg-ratio{display:block;columns:220px;column-gap:16px}
.dg-ratio .dg-card{display:block;width:100%;margin:0 0 16px;break-inside:avoid}
.dg-ratio .dg-card:hover{transform:none;box-shadow:0 26px 60px rgba(23,40,74,.16);border-color:rgba(61,107,244,.35)}
.dg-ratio .dg-card:active{transform:none}
.dg-ratio .dg-thumb{aspect-ratio:auto;display:block;background:#F4F7FB}
.dg-ratio .dg-thumb img{width:100%;height:auto;object-fit:contain;display:block}
/* 封面是矢量/占位图时没有固有比例，退回 4:3 */
.dg-ratio .dg-thumb.is-svg{aspect-ratio:4/3}
.dg-ratio .dg-thumb.is-svg .svg-box,.dg-ratio .dg-thumb.is-svg .svg-box svg{width:100%;height:100%}
@media (max-width:720px){
  .dg-ratio{column-gap:9px}
  .dg-ratio .dg-card{margin-bottom:9px}
}
@media (max-width:560px){
  .dg-ratio{columns:2;column-gap:7px}
  .dg-ratio .dg-card{margin-bottom:7px}
}

/* ---------- 上传时给「客户名」打码：开关 + 预览角标 ---------- */
.mask-opt{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.mask-opt input{width:15px;height:15px;accent-color:var(--acc);flex:none}
.mask-tag{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;border-radius:6px;padding:1px 6px;letter-spacing:.5px;color:#fff}
.mask-tag.ok{background:rgba(24,160,88,.92)}
.mask-tag.warn{background:rgba(214,69,69,.94)}
@media (max-width:720px){ .mask-opt{font-size:11.5px} }

/* ---------- 3D 图管理卡片上的删除按钮（与成品展示一致） ---------- */
.dg-del{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(9,16,30,.72);color:#fff;font-size:13px;cursor:pointer;z-index:3;transition:.2s}
.dg-del:hover{background:var(--red);transform:scale(1.08)}
@media (max-width:720px){ .dg-del{top:6px;right:6px;width:32px;height:32px;font-size:12px} }
/* ---------- 客服：客户侧显示 + 工作台 + 表单新字段 ---------- */
.cust-staff{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 14px;border-radius:999px;
  background:var(--acc-tint);border:1px solid rgba(61,107,244,.16);color:var(--ink-2);font-size:13px;letter-spacing:.5px;
}
.cust-staff b{color:var(--acc);font-weight:800}
.staff-chip{
  display:inline-block;padding:3px 11px;border-radius:999px;background:var(--acc-tint);color:var(--acc);
  font-size:12.5px;font-weight:700;border:1px solid rgba(61,107,244,.16);white-space:nowrap;
}
.u-ava.gray{background:#E4E9F2;color:#8C99AC}
.users-tools{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.users-tools .f-label{margin:0;white-space:nowrap}
.users-tools .f-input{max-width:220px}
/* 用户管理搜索框 + 总数（2026-10-13）：搜索框可伸长，总数靠右贴边 */
.users-tools .f-input.search{max-width:300px;min-width:200px;flex:0 1 300px}
.ut-count{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.ut-count b{color:var(--ink);font-weight:700;font-family:var(--font-en)}

/* 订单弹窗：金额构成四项 */
.cost-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cost-cell{display:flex;align-items:center;gap:7px}
.cost-k{font-size:12px;color:var(--ink-3);white-space:nowrap;flex:none}
.cost-cell .f-input{padding-left:10px;padding-right:10px}
.f-hint.warn{color:#B4780F}
.f-hint.warn b{color:var(--red)}

/* 订单详情：金额构成块 */
.cost-box{margin-top:18px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.6);border:1.5px dashed var(--line)}
.cost-box-k{font-size:12px;color:var(--ink-3);letter-spacing:1px;margin-bottom:10px}
.cost-box-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.cost-box-grid>div{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink-2)}
.cost-box-grid>div span{color:var(--ink-3);font-size:12px;min-width:30px}
.cost-box-grid>div b{font-family:var(--font-en);color:var(--ink);font-weight:700}
.cost-box-grid>div i{font-style:normal;font-size:11.5px;color:var(--acc)}

/* 客服工作台 */
#view-admin-staff .section-title-row{flex-wrap:wrap}
#view-admin-staff .section-title-row .section-title{white-space:nowrap}
#staffStatCards .stat .sk.sub{letter-spacing:0;color:var(--ink-3);opacity:.9;font-size:11.5px;line-height:1.55}
.staff-table td{vertical-align:top}
.staff-detail>td{padding:0 12px 14px;background:rgba(237,241,247,.5)}
.staff-sub-wrap{overflow-x:auto;padding-top:4px}
table.staff-sub{min-width:640px;background:#fff;border-radius:12px}
table.staff-sub th{font-size:11.5px;color:var(--ink-3);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line)}
table.staff-sub td{padding:9px 12px;font-size:13px;border-bottom:1px solid rgba(226,232,240,.7)}
table.staff-sub tr:last-child td{border-bottom:none}
.staff-main .row-btn{white-space:nowrap}
@media (max-width:720px){
  .cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cost-box-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 数据看板 v8.19（超期角标 / 看板表格 / 分段栏） ---------- */
/* 指标卡：文字必须能在卡内换行。
   副标题里含「÷」「（46 人）」这类无法在空格处断行的片段，
   不给 overflow-wrap 时会直接顶出卡片边框（v8.32 修）。 */
.stat>div{min-width:0}
.stat .sk,.stat .sk.sub{white-space:normal;overflow-wrap:anywhere}
#view-admin-board .stat-cards{margin-bottom:20px}

/* ================================================================
   AI 数据分析师面板（v8.33）
   只给管理员；数值、口径、工具调用都展示出来，方便对账。
   ================================================================ */
#boardTabAsk{margin-left:auto;border-color:var(--acc-line);color:var(--acc);font-weight:700}

/* ---------- 待补字段清单 + 一键补填（v8.34） ---------- */
.gap-list{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px}
/* ================================================================
   皮肤选择器（v8.38）
   20 个色卡，点击即时换底色；当前选中的打勾并描边
   ================================================================ */
.skin-modal{max-width:560px}
.skin-body{padding:4px 2px 2px}
.skin-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:12px;max-height:52vh;overflow:auto;padding:2px;
}
.skin-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:9px 6px 7px;cursor:pointer;font-family:var(--font-cn);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.skin-item:hover{border-color:var(--acc);transform:translateY(-1px);box-shadow:0 6px 16px rgba(60,50,35,.10)}
.skin-chip{
  width:46px;height:46px;border-radius:10px;border:1px solid rgba(0,0,0,.10);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.skin-item .name{font-size:12px;color:var(--ink-2);white-space:nowrap}
.skin-item.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-line)}
.skin-item.on .name{color:var(--acc-2);font-weight:700}
.skin-check{color:#2B50E0;font-size:17px;font-weight:800;line-height:1}
.skin-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
}
@media (max-width:760px){
  .skin-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:9px;max-height:46vh}
  .skin-chip{width:40px;height:40px}
  .skin-foot{flex-direction:column;align-items:stretch}
}
/* 客服工作台顶部的补填入口 */
.gap-entry{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border:1px solid var(--acc-line);background:var(--acc-tint);border-radius:14px;
  padding:12px 16px;margin:14px 0;font-size:13px;color:var(--ink-2);line-height:1.6;
}
.gap-open{
  border:1px solid var(--acc-line);background:#fff;color:var(--ink);border-radius:12px;
  padding:10px 14px;font-size:13px;cursor:pointer;font-family:var(--font-cn);text-align:left;
  transition:.2s;line-height:1.5;
}
.gap-open:hover{border-color:var(--acc);box-shadow:0 4px 14px rgba(43,80,224,.12)}
.gap-open b{color:var(--acc-2)}
.gap-open .muted{font-size:11.5px;display:block;margin-top:2px}
/* 待补字段 / 认领弹窗（v9）：外层是 .modal-mask，卡片观感交给 .modal，
   这里只定宽度。原来是页内的一块（border+背景+margin），放在「数据看板」view 里，
   客服在工作台点「去补填」时被祖先的 display:none 吃掉，所以改成全局弹窗。 */
.gap-panel{max-width:840px;margin:0}

/* ---------- 已完成产品图片（图集，v9.1） ----------
   一行 8 个（窄屏自动减列）；每格正方形、图片裁切填满，下面压一条文字说明。 */
.done-gallery-modal{max-width:1280px}
.done-grid{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;padding:2px;
}
.done-cell{
  position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#F4F7FC;cursor:zoom-in;transition:border-color .18s,box-shadow .18s,transform .18s;
}
.done-cell:hover{border-color:var(--acc);box-shadow:0 6px 18px rgba(60,50,35,.14);transform:translateY(-1px)}
.done-cell .ph{position:relative;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center}
.done-cell img{width:100%;height:100%;object-fit:cover;display:block}
.done-cell .cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 7px 5px;
  background:linear-gradient(to top,rgba(8,14,28,.78),rgba(8,14,28,0));
  color:#fff;font-size:11px;line-height:1.35;
}
.done-cell .cap b{font-size:11.5px;font-weight:700;line-height:1.32;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.done-cell .cap span{opacity:.85}
.done-cell .noimg{color:var(--ink-3);font-size:11px;text-align:center;padding:8px}
@media (max-width:1200px){ .done-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:900px){  .done-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px} }
@media (max-width:640px){  .done-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .done-gallery-modal{padding:18px 15px} }
@media (max-width:420px){  .done-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.gap-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.gap-progress{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:12px}
.gap-bar{flex:1;height:7px;border-radius:6px;background:var(--line-soft);overflow:hidden}
.gap-bar i{display:block;height:100%;background:linear-gradient(90deg,#4E77F6,#2B50E0);transition:width .3s}
.gap-item{
  border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;background:#fff;
}
.gap-item-main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gap-item-meta{margin-top:5px;font-size:12px;color:var(--ink-3)}
.gap-field{margin:12px 0}
.gap-field>select,.gap-field>input{max-width:320px}
.gap-cost{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.gap-cell{display:flex;align-items:center;gap:8px}
.gap-cell span{font-size:12px;color:var(--ink-3);flex:none;min-width:28px}
.gap-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.gap-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.gap-msg{margin-top:9px;font-size:12px;color:#8A5D0B;min-height:16px}
@media (max-width:760px){
  .gap-panel{padding:18px 15px}          /* 手机端把 .modal 的 28/30 内边距收一收 */
  .gap-field>select,.gap-field>input{max-width:none;width:100%}
  .gap-actions .btn{flex:1}
}
.ai-panel{
  border:1px solid var(--acc-line);border-radius:16px;background:var(--glass);
  padding:18px 20px;margin:16px 0 22px;box-shadow:var(--shadow);
}
.ai-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ai-title{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.5px}
.ai-sub{font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.6}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 4px}
.ai-chip{
  border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px;
  padding:5px 12px;font-size:12px;cursor:pointer;font-family:var(--font-cn);transition:.2s;
}
.ai-chip:hover{border-color:var(--acc);color:var(--acc)}
.ai-log{margin-top:12px;display:flex;flex-direction:column;gap:14px}
.ai-log:empty{display:none}
.ai-turn{border-top:1px dashed var(--line);padding-top:13px}
.ai-turn:first-child{border-top:none;padding-top:0}
.ai-ask{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;gap:8px;align-items:flex-start}
.ai-ask .u-ava{width:24px;height:24px;font-size:12px;flex:none}
.ai-body{
  margin:9px 0 0 32px;font-size:13.5px;color:var(--ink-2);line-height:1.8;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.ai-body h4{margin:11px 0 5px;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.5px}
.ai-body ul,.ai-body ol{margin:5px 0 5px 20px;padding:0}
.ai-body li{margin:3px 0}
.ai-body table{border-collapse:collapse;margin:8px 0;font-size:12.5px;width:100%}
.ai-body th,.ai-body td{border:1px solid var(--line);padding:5px 9px;text-align:left}
.ai-body th{background:var(--line-soft);font-weight:700;color:var(--ink)}
.ai-body b,.ai-body strong{color:var(--ink)}
.ai-meta{margin:9px 0 0 32px;font-size:11.5px;color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ai-meta .ai-tag{border:1px solid var(--line);border-radius:6px;padding:1px 7px;background:#fff}
.ai-err{color:var(--red);font-size:13px;margin:9px 0 0 32px;line-height:1.7}
.ai-wait{font-size:13px;color:var(--ink-3);margin:10px 0 0 32px}
.ai-dots::after{content:'';animation:aiDots 1.2s steps(4,end) infinite}
@keyframes aiDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.ai-input{display:flex;gap:10px;align-items:flex-end;margin-top:14px}
.ai-input textarea{flex:1;resize:vertical;min-height:52px;font-family:var(--font-cn);line-height:1.6}
.ai-input .btn{flex:none;height:40px}
.ai-foot{margin-top:9px;font-size:11.5px;color:var(--ink-3);line-height:1.6}
@media (max-width:760px){
  .ai-panel{padding:14px 13px}
  .ai-body,.ai-meta,.ai-err,.ai-wait{margin-left:0}
  .ai-input{flex-direction:column;align-items:stretch}
  .ai-input .btn{width:100%}
  #boardTabAsk{margin-left:0}
}
.board-tabs{margin-bottom:20px;flex-wrap:wrap;max-width:100%;overflow-x:auto}
.bd-wrap{overflow-x:auto;margin-bottom:6px}
.bd-wrap table{min-width:640px}
.bd-wrap tbody tr[onclick]{cursor:pointer}
.bd-total td{font-weight:700;background:rgba(238,242,252,.62)}
.bd-total td:first-child{color:var(--ink-2)}
#view-admin-board .u-note{margin-top:14px}
/* 数据看板页：宽屏下内容区放宽 + 表格收紧（2026-10-14 老板要求）
   「客服」表有 11 列（含金 / 钻 / 工费 / 杂费），在 1120px 容器里最右边一两列会被截掉、要横向拖。
   这里只放宽这一页，并把表格内边距 / 字号收紧，让 11 列在常见桌面宽度下一次看全；
   订单列表（#view-admin-home）的列宽是单独调过的，不动；窄屏仍由 .bd-wrap 的横向滚动兜底。 */
#view-admin-board .bd-wrap .td-main{min-width:0}
#view-admin-board .bd-wrap thead th{padding:12px 10px;letter-spacing:1px}
#view-admin-board .bd-wrap tbody td{padding:11px 10px;font-size:13px}
.due-badge{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:7px;font-size:11px;font-weight:700;
  letter-spacing:.5px;white-space:nowrap;vertical-align:middle;
}
.due-badge.over{background:var(--red-tint);color:var(--red);border:1px solid rgba(212,86,74,.35)}
.due-badge.soon{background:rgba(247,239,225,.85);color:#8A5D0B;border:1px solid rgba(180,120,15,.45)}
@media (max-width:760px){
  .board-tabs .seg-btn{padding:8px 13px;font-size:12.5px}
  .bd-wrap table{min-width:600px}
}
/* 手机端：看板指标卡收紧（图标 + 数字都缩小），避免 2 列卡把整页撑出横向滚动 v8.19.1 */
@media (max-width:760px){
  #view-admin-board .stat-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  #view-admin-board .stat{padding:14px 13px;gap:10px;min-width:0;border-radius:13px}
  #view-admin-board .stat>div{min-width:0}
  #view-admin-board .stat .si{width:36px;height:36px;border-radius:10px}
  #view-admin-board .stat .si svg{width:17px;height:17px}
  #view-admin-board .stat .sv{font-size:19px;letter-spacing:-.2px;overflow-wrap:anywhere}
  #view-admin-board .stat .sk,#view-admin-board .stat .sk.sub{white-space:normal;overflow-wrap:anywhere}
}

/* ================================================================
   手机 / 平板适配精修（v8.31）
   原则：只加窄屏规则，PC（≥1025px）视觉与布局完全不变。
   ================================================================ */

/* 价格设置页：卡片最小宽度不再撑破极窄屏（原 minmax(320px,1fr) 在 ≤347px 会横向溢出） */
.pr-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}

/* 平板及以下：门户装饰光斑收进视口，不再被屏幕右缘切掉一块 */
@media (max-width:1024px){
  .portal-cards::before{width:min(320px,60%);height:min(320px,60%);left:-12px;top:-40px}
  .portal-cards::after{width:min(340px,64%);height:min(340px,64%);right:-12px;bottom:-70px}
  /* 平板触摸：顶栏小按钮抬到 38px（手机上另有 40px 规则） */
  .btn-mini{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
  /* 触控热区：只扩大可点范围，不改视觉 */
  .top-link::before{inset:-12px -8px}
  .staff-link::before{inset:-14px -12px}
}

/* 平板（761–1024）：作品缩略图每行多放一档，别再一张卡占掉半屏 */
@media (min-width:761px) and (max-width:1024px){
  /* 品牌名不折行：nowrap 只在 ≤760 档写过，761–1024 这档漏了会让「德得珠宝」挤成两行 */
  .brand-name{white-space:nowrap}
  .works-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
}

/* 手机（≤760）：顶栏单行不折行 + 后台入口按钮整齐排布 */
@media (max-width:760px){
  /* 顶栏：高度自适应；品牌名/按钮一律不折行。极窄屏放不下时整块右栏换行，而不是把文字拆两行。
     客户侧现在有 4 个入口（成品展示 / 3D 效果图 / 我的订单 / 个人中心）+ 退出登录，
     390px 下必然放不下 → #topbarRight 允许换行，顶栏自动变高（height:auto 已在上一条）。 */
  .topbar-inner{height:auto;min-height:56px;padding:0 12px;gap:10px;flex-wrap:wrap;row-gap:4px}
  .brand{gap:9px;flex:none}
  .brand-mark{width:38px;height:38px;border-radius:11px}
  .brand-mark img{width:32px;height:32px}
  .brand-name{font-size:16px;letter-spacing:1px;white-space:nowrap}
  #topbarRight{gap:8px;flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap;row-gap:4px}
  .top-link{font-size:12.5px;letter-spacing:0}
  .btn-mini{padding:7px 12px;font-size:12.5px;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center}
  .btn-mini.top-entry{padding:7px 10px;font-size:12px;letter-spacing:0}
  /* 分段切换（今日/本月、总览/客服…）：手机上抬到 40px，符合触控标准 */
  .seg-btn{padding:11px 16px;font-size:13px;letter-spacing:.5px}
  .board-tabs .seg-btn{padding:10px 13px;font-size:12.5px}

  /* 后台首页工具条：搜索框整行 → 入口按钮等宽网格 → 主按钮整行 */
  #view-admin-home .toolbar-right{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;width:100%}
  #view-admin-home .toolbar-right .f-input.search{grid-column:1/-1;width:100%;min-width:0}
  #view-admin-home .toolbar-right .btn{width:100%;min-width:0;padding:10px 6px;font-size:12px;letter-spacing:0}
  /* 新建订单（v9.10 起在入口按钮排）：整行独占；字号/内边距跟同排入口按钮一致，
     否则会比邻排按钮高 1px（_toolbar-audit.js 会报「同排不同高」）。 */
  #view-admin-home .toolbar-right #btnNewOrder{grid-column:1/-1}
  /* 筛选控件并入入口按钮网格（v9.6）：分段占满整行、图集靠左自然宽（搜索框与主按钮整行见上三条） */
  #view-admin-home .toolbar-right .seg{grid-column:1/-1;width:100%}
  #view-admin-home .toolbar-right .seg-btn{flex:1;padding:8px 6px;font-size:12.5px;letter-spacing:0}
  #view-admin-home .toolbar-right #btnDoneGallery{grid-column:1/-1;justify-self:start;width:auto}
  /* 时间区间工具条（工作台 / 数据看板）：手机上分段按钮、区间说明、日期条各占一行；
     日期条里两个日期框各占一行，「至」和「查询」并排 —— 窄屏也不会挤出边界。 */
  #staffRangeText,#boardRangeText{order:8;flex:1 1 100%;text-align:left}
  #staffCustom .f-input,#boardCustom .f-input{flex:1 1 100%}
}

/* 极窄屏（≤360）：再收一档，保证顶栏仍是单行 */
@media (max-width:360px){
  .topbar-inner{padding:0 10px;gap:8px}
  .brand{gap:8px}
  .brand-mark{width:34px;height:34px;border-radius:10px}
  .brand-mark img{width:28px;height:28px}
  .brand-name{font-size:15px;letter-spacing:.5px}
  #topbarRight{gap:6px}
  .top-link{font-size:11.5px}
  .btn-mini{padding:6px 10px;font-size:11.5px}
  .btn-mini.top-entry{padding:6px 8px;font-size:11px;letter-spacing:0}
}
/* ===== 客服账号体系（v8.32）：加好友→建档→成交 漏斗 / 日报与系统口径不一致标记 ===== */
.funnel{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.funnel .fn-step{flex:1 1 0;min-width:118px;background:rgba(255,255,255,.72);border:1px solid var(--acc-line);
  border-radius:var(--radius-sm);padding:10px 14px;text-align:center}
.funnel .fn-step b{display:block;font-size:20px;line-height:1.2;color:var(--acc-2);font-family:var(--font-en)}
.funnel .fn-step i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.5px}
.funnel .fn-arrow{display:flex;align-items:center;color:var(--acc);font-weight:700;font-size:15px}
.u-note.newcust .funnel{margin-bottom:8px}
.u-note.newcust .funnel .fn-step{background:#fff;border-color:var(--acc-line)}
.mm{color:var(--orange);font-weight:700}
@media (max-width:760px){
  .funnel .fn-step{min-width:calc(50% - 14px);padding:9px 10px}
  .funnel .fn-step b{font-size:17px}
  .funnel .fn-arrow{transform:rotate(90deg)}
}
/* ================= 会员管理（积分 / 等级 / 对接客服 / 添加日期） · v8.40 =================
   会员 = 手机号账号；积分手工台账、等级手工指定。 */
.ms-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.ms-card{background:var(--glass-strong);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.ms-card span{font-size:12px;color:var(--ink-3);letter-spacing:.5px}
.ms-card b{font-size:22px;font-family:var(--font-en);color:var(--ink)}
.ms-card.wide{grid-column:1/-1}
/* 「各等级人数」+「最近 30 天积分变动」并排一行（2026-10-15 老板要求）；
   窄屏（≤760）仍上下堆叠，免得两颗药丸在各半栏里挤成好几行。 */
.ms-duo{grid-column:1/-1;display:flex;gap:12px;align-items:stretch}
.ms-duo > .ms-card{flex:1 1 0;min-width:0}
.ms-lvs{display:flex;flex-wrap:wrap;gap:8px}
.ms-lv{background:var(--acc-tint);color:var(--acc-2);border-radius:999px;padding:3px 10px;font-size:12.5px;display:inline-flex;gap:6px;align-items:baseline}
.ms-lv i{font-style:normal;font-weight:600}
.ms-tools{margin-bottom:14px}
.ms-tools .f-input.search{max-width:320px}
.ms-phone{font-size:12px;color:var(--ink-3);font-family:var(--font-en);letter-spacing:.3px}
.ms-tag{font-size:11px;color:var(--orange);background:var(--orange-tint);border-radius:6px;padding:1px 6px}
.ms-lvtag{display:inline-block;background:var(--acc-tint);color:var(--acc-2);border-radius:6px;padding:2px 8px;font-size:12.5px}
.ms-tip{font-size:11.5px;color:var(--orange);margin-top:4px}
.ms-foot{padding:10px 4px;font-size:12px;color:var(--ink-3)}
.ms-log-wrap{max-height:62vh;overflow:auto}
/* 积分台账弹窗（v9.7）：弹窗已加宽；列一律不折行，原因列单独允许折行。
   实在放不下时由 .ms-log-wrap 横向滚动，而不是把字挤成两行。 */
#memberLogBody table{min-width:860px}
#memberLogBody th,#memberLogBody td{white-space:nowrap}
#memberLogBody td.ms-log-reason{white-space:normal;min-width:170px;max-width:360px}
.ms-rows{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.ms-row{display:flex;align-items:center;gap:8px}
.ms-row .ms-lv-name{flex:1;min-width:90px}
.ms-row .ms-lv-min{width:110px}
.ms-row-txt{font-size:13px;color:var(--ink-2);white-space:nowrap}
.ms-import-sum{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.ms-imp{background:var(--acc-tint);border-radius:var(--radius-sm);padding:8px 12px;display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--ink-2)}
.ms-imp b{font-size:18px;font-family:var(--font-en);color:var(--acc-2)}

/* 客户页：会员积分条（放不下就换行，别把页面顶宽） */
.cust-member{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px;padding:10px 16px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--line)}
.cust-member .cm-k{font-size:12.5px;color:var(--ink-3);letter-spacing:1px}
.cust-member .cm-v{font-size:20px;font-family:var(--font-en);color:var(--acc-2)}
.cust-member .cm-tip{font-size:12px;color:var(--orange)}
.cust-member .cm-added{font-size:12px;color:var(--ink-3)}
.cust-member .cm-note{font-size:11.5px;color:var(--ink-3);margin-left:auto}

/* 会员等级：按规则一键采纳的提示条（v8.41） */
.fs-tip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--acc-tint);font-size:12.5px;color:var(--ink-2)}
.fs-tip .btn{padding:4px 10px;font-size:12.5px}
@media (max-width:760px){
  .ms-cards{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
  .ms-duo{flex-direction:column}
  .ms-row{flex-wrap:wrap}
  .ms-row .ms-lv-min{width:90px}
  .ms-tools .f-input.search{max-width:100%}
  .users-tools .f-input.search{max-width:100%;flex:1 1 100%}
  .ut-count{margin-left:0}
  .cust-member{border-radius:var(--radius-sm)}
  .cust-member .cm-note{margin-left:0}
}
/* ---------- 客户自填「称呼」（2026-10-09，v8.43） ----------
   订单页顶部的提醒条（名字还是占位名时才出现）+ 常驻的「修改我的称呼」入口。
   移动端：文案占满一行，按钮换到下一行，避免挤成一坨。 */
.cust-name-row{margin-top:10px}
.name-tip{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding:12px 16px;border-radius:var(--radius-sm);
  background:var(--acc-tint);border:1px solid rgba(61,107,244,.18);
  font-size:13.5px;color:var(--ink-2);letter-spacing:.3px;
}
.name-tip .nt-text{flex:1 1 auto;min-width:0}
.name-tip .btn{flex:0 0 auto}
@media (max-width:760px){
  .name-tip{padding:11px 13px;font-size:13px}
  .name-tip .nt-text{flex:1 1 100%}
}

/* ---------- 客户「个人中心」（2026-10-09 新增，v8.44） ----------
   我的资料 + 我的积分 + 积分明细 三块。
   与「我的订单」的分工：订单页只留一行积分摘要（点进这里看明细），
   等级提示 / 添加日期 / 跟单客服 / 明细都只在个人中心出现，不在两处重复。 */
.cm-entry{cursor:pointer;gap:12px}
.cm-entry .cm-go{margin-left:auto;font-size:12.5px;color:var(--acc);font-weight:700}
.cm-entry:hover{border-color:var(--acc)}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;margin-bottom:16px}
.pf-rows{display:flex;flex-direction:column}
.pf-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.pf-row:last-child{border-bottom:0}
.pf-k{width:74px;flex:none;font-size:12.5px;color:var(--ink-3);letter-spacing:.5px}
.pf-v{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink);word-break:break-all}
.pf-v .btn{margin-left:auto;flex:none}
.pf-points{display:flex;flex-direction:column;gap:8px}
.pf-pts{display:flex;align-items:baseline;gap:8px}
.pf-pts b{font-family:var(--font-en);font-size:38px;line-height:1;color:var(--acc-2)}
.pf-pts span{font-size:12.5px;color:var(--ink-3)}
.pf-bal{font-size:12.5px;color:var(--ink-2);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pf-bal b{font-family:var(--font-en);font-size:15px;color:var(--acc-2)}
.pf-lvl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.pf-gap{font-size:12.5px;color:var(--orange)}
.pf-note{font-size:11.5px;color:var(--ink-3)}
.pf-log-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.pf-log{display:flex;flex-direction:column}
.pf-log-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px}
.pf-log-row:last-child{border-bottom:0}
.pf-log-d{flex:none;width:136px;font-family:var(--font-en);font-size:12px;color:var(--ink-3)}
.pf-log-t{flex:1;min-width:0;color:var(--ink-2);word-break:break-all}
.pf-log-v{flex:none;width:72px;text-align:right;font-family:var(--font-en);font-weight:800;color:var(--ink-3)}
.pf-log-v.plus{color:var(--green)}
.pf-log-v.minus{color:var(--red)}
.pf-log-b{flex:none;width:76px;text-align:right;font-family:var(--font-en);font-size:12px;color:var(--ink-3)}
.pf-more{margin-top:14px;text-align:center}
/* 会员等级权益：一行一级，当前等级高亮标「当前」 */
.pf-benefits{display:flex;flex-direction:column;gap:10px}
.pf-bn{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;background:rgba(255,255,255,.6)}
.pf-bn.on{border-color:var(--acc);background:var(--acc-tint);box-shadow:0 1px 2px var(--acc-line)}
.pf-bn-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-bn-n{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:.5px}
.pf-bn.on .pf-bn-n{color:var(--acc-2)}
.pf-bn-now{font-size:11px;font-weight:800;color:#fff;background:var(--acc);border-radius:999px;padding:2px 9px}
.pf-bn-s{font-size:12px;color:var(--ink-3);font-family:var(--font-en)}
.pf-bn-p{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pf-chip{font-size:12px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.pf-bn.on .pf-chip{border-color:var(--acc-line);color:var(--acc-2)}
.pf-rules{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.pf-rule-t{font-size:12.5px;font-weight:800;color:var(--ink-2);letter-spacing:1px;margin:12px 0 6px}
.pf-rule-t:first-child{margin-top:0}
.pf-rule-l{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink-3);line-height:1.8}
.pf-rule-row{display:flex;gap:10px;font-size:12.5px;line-height:1.8;padding:2px 0}
.pf-rule-k{flex:none;width:74px;color:var(--ink-2);font-weight:700}
.pf-rule-v{flex:1;min-width:0;color:var(--ink-3)}
@media (max-width:760px){
  .pf-k{width:66px}
  .pf-rule-k{width:64px}
  .pf-log-d{width:100px;font-size:11.5px}
  .pf-log-v{width:58px}
  .pf-log-b{width:62px;font-size:11.5px}
  .pf-log-row{gap:8px;font-size:12.5px}
}

/* ============================================================
   分批懒渲染 / 离线提示条（2026-10-12 容量与可靠性改造）
   ============================================================ */
/* 分批懒渲染的尾注：订单表里是普通 <div>；作品网格里要独占整行（grid-column:1/-1） */
.list-foot{grid-column:1/-1;padding:12px 2px 2px;font-size:12px;color:var(--ink-3);text-align:center}
/* 后端连不上时的提示条：明确告诉使用者「数据不会上云」，别再让人白录（app.js 显示）
   用深砖红而不是 accent 蓝：这必须是"出问题了"的观感，不是普通提示 */
.offline-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 16px;background:#7A2B16;color:#FFE9D6;font-size:13px;line-height:1.5}
.offline-bar[hidden]{display:none}
.offline-bar .ob-icon{font-size:15px;line-height:1}
.offline-bar .ob-text{flex:1 1 260px}
.offline-bar .ob-text b{color:#fff}
.offline-bar .ob-retry{flex:none;border:1px solid rgba(255,233,214,.5);background:transparent;color:#FFE9D6;
  border-radius:8px;padding:4px 12px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.offline-bar .ob-retry:hover{background:rgba(255,233,214,.14)}
.offline-bar .ob-retry:disabled{opacity:.65;cursor:default}
@media (max-width:760px){
  .offline-bar{padding:8px 12px;font-size:12.5px}
  .offline-bar .ob-text{flex:1 1 100%}
}