/* ============================================================
   order-center.css — 订单中心 / 派单厅 重设计 生产样式
   追加到 play-pages.css 之后(在 play.css 之后加载)。
   全部沿用 play.css 的 CSS 变量:--v-bright / --a-coral / --a-mint /
   --card-grad / --display / --hud / --cn / --mono / --ok / --line 等。
   深色已由 html[data-theme="dark"] 接管,本文件不写死任何颜色数值。
   复用既有结构类:.ocard2 / .grab2 / .cc-wall / .crown-card / .dpcr-* /
   .center-modal —— 本文件只新增/微调订单中心改版用到的部分。
   ============================================================ */

/* ============================================================
   0) 外壳(整模块 mountOrderCenter 渲染:业务tab / 身份条 / 角色切换 /
      角色band / 工具栏 / 状态分区标题 / 面板容器)
   ============================================================ */
.oc-root{ font-family:var(--cn); color:var(--text); }
.oc-root *{ box-sizing:border-box; }
/* 角色切换(双身份) */
.oc-roleswitch{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.oc-root[data-dual="no"] .oc-roleswitch{ display:none; }
/* 资质预门控:my_identity 确认是陪玩之前先藏切换卡(adapter 加/摘 body class),防"闪 2 秒再消失" */
body.oc-precomp-hide .oc-roleswitch{ display:none !important; }
.oc-role{ display:flex; align-items:center; gap:13px; text-align:left; padding:14px 18px; border-radius:var(--r-sm);
  border:1.5px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; transition:.18s; }
.oc-role .ri{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; color:#fff; }
.oc-role .ri svg{ width:22px; height:22px; }
.oc-role .rt b{ font-family:var(--cn); font-weight:800; font-size:15.5px; display:block; }
.oc-role .rt small{ font-family:var(--mono); font-size:10px; color:var(--text-mute); }
.oc-role[data-r="boss"] .ri{ background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); }
.oc-role[data-r="player"] .ri{ background:linear-gradient(135deg,var(--a-amber),var(--a-coral)); }
.oc-root[data-role="boss"] .oc-role[data-r="boss"]{ border-color:var(--v-signature); background:color-mix(in oklab,var(--v-signature) 12%,var(--surface)); box-shadow:inset 0 0 0 1px var(--v-signature); }
.oc-root[data-role="player"] .oc-role[data-r="player"]{ border-color:var(--a-coral); background:color-mix(in oklab,var(--a-coral) 12%,var(--surface)); box-shadow:inset 0 0 0 1px var(--a-coral); }
.oc-root[data-role="boss"] .oc-role[data-r="player"], .oc-root[data-role="player"] .oc-role[data-r="boss"]{ opacity:.58; }
.oc-role:hover{ opacity:.92; }
/* 角色 band */
.oc-band{ display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:13px; margin-bottom:18px; border:1.5px solid var(--line); }
.oc-root[data-role="boss"] .oc-band{ background:color-mix(in oklab,var(--v-signature) 8%,var(--surface)); border-color:color-mix(in oklab,var(--v-signature) 22%,var(--line)); }
.oc-root[data-role="player"] .oc-band{ background:color-mix(in oklab,var(--a-coral) 8%,var(--surface)); border-color:color-mix(in oklab,var(--a-coral) 20%,var(--line)); }
.oc-band span{ font-family:var(--cn); font-size:13.5px; color:var(--text-dim); }
.oc-band b{ color:var(--text); }
/* 身份条 · 个人中心款(单条:左资料 + 右渐变钱包,无缝) */
.oc-id{ display:flex; align-items:stretch; flex-wrap:nowrap; min-height:96px; margin-bottom:18px; border-radius:18px; overflow:hidden; border:1.5px solid var(--line); }
.oc-id.diamond{ background:linear-gradient(120deg,var(--v-deep),var(--v-bright)); border-color:transparent; }
.oc-id.gold{ background:linear-gradient(120deg,var(--a-coral),var(--a-amber)); border-color:transparent; }
.oc-id-who{ display:flex; align-items:center; gap:15px; flex:1 1 auto; min-width:240px; padding:16px 22px; position:relative; }
.oc-id-who .av{ width:54px; height:54px; font-size:20px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }
.oc-id-who .nm{ font-family:var(--cn); font-weight:800; font-size:17px; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.oc-id-who .tag{ font-family:var(--hud); font-weight:700; font-size:10px; padding:3px 8px; border-radius:6px; }
.oc-id-who .tag.boss{ background:color-mix(in oklab,var(--v-signature) 22%,transparent); color:var(--v-bright); }
.oc-id-who .tag.player{ background:color-mix(in oklab,var(--a-mint) 18%,transparent); color:var(--a-mint); }
.oc-id-who .handle{ font-family:var(--mono); font-size:11px; color:var(--text-mute); margin-top:4px; }
.oc-id-who .swrow{ display:inline-flex; align-items:center; gap:8px; margin-top:9px; }
.oc-id-who .swrow small{ font-family:var(--mono); font-size:10.5px; color:var(--ok); }
.oc-id-who .sw{ position:relative; width:42px; height:24px; border-radius:999px; border:0; background:rgba(255,255,255,.45); cursor:pointer; flex:none; }
.oc-id-who .sw::after{ content:""; position:absolute; top:3px; left:21px; width:18px; height:18px; border-radius:50%; background:#fff; }
.oc-id-who .sw[data-on="0"]::after{ left:3px; }
/* 文字配色随底色 */
.oc-id.diamond .oc-id-who{ color:#fff; } .oc-id.diamond .oc-id-who .nm{ color:#fff; } .oc-id.diamond .oc-id-who .handle, .oc-id.diamond .oc-id-who .swrow small{ color:rgba(255,255,255,.78); } .oc-id.diamond .oc-id-who .tag{ background:rgba(255,255,255,.20); color:#fff; }
.oc-id.gold .oc-id-who{ color:#2a1500; } .oc-id.gold .oc-id-who .nm{ color:#2a1500; } .oc-id.gold .oc-id-who .handle, .oc-id.gold .oc-id-who .swrow small{ color:rgba(42,21,0,.6); } .oc-id.gold .oc-id-who .tag{ background:rgba(0,0,0,.16); color:#2a1500; }
/* 大渐变钱包卡 */
.oc-wcard{ flex:1.05 1 auto; min-width:0; position:relative; overflow:hidden; padding:16px 22px;
  display:flex; flex-direction:column; justify-content:center; gap:7px; background:transparent; }
.oc-wcard.diamond{ color:#fff; }
.oc-wcard.gold{ color:#2a1500; }
.oc-wcard::after{ content:""; position:absolute; right:-30px; top:-30px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.20), transparent 65%); pointer-events:none; }
.oc-wcard .wlabel{ font-family:var(--cn); font-size:12.5px; opacity:.92; position:relative; }
.oc-wcard .wrow{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:relative; }
.oc-wcard .wbig{ font-family:var(--display); font-style:italic; font-weight:900; font-size:34px; line-height:1; display:flex; align-items:center; gap:10px; letter-spacing:.01em; }
.oc-wcard .wbig .gem{ font-style:normal; font-size:26px; }
.oc-wcard .wbtns{ margin-left:auto; display:flex; gap:10px; }
.oc-wcard .wbtn{ font-family:var(--hud); font-weight:700; font-size:13px; padding:10px 18px; border-radius:999px; cursor:pointer; border:0; white-space:nowrap; transition:.16s; }
.oc-wcard .wbtn:hover{ transform:translateY(-1px); }
.oc-wcard.diamond .wbtn.solid{ background:#fff; color:var(--v-deep); }
.oc-wcard.diamond .wbtn.ghost{ background:rgba(255,255,255,.20); color:#fff; }
.oc-wcard.gold .wbtn.solid{ background:#2a1500; color:var(--a-amber); }
.oc-wcard.gold .wbtn.ghost{ background:rgba(0,0,0,.16); color:#2a1500; }
@media(max-width:760px){ .oc-wcard .wbig{ font-size:28px; } .oc-id{ flex-wrap:wrap; } .oc-id-who, .oc-wcard{ flex-basis:100%; } }
/* 业务一级 tab */
/* 业务 tab v33:下划线+emoji → 分段填充胶囊+线性SVG图标 */
.oc-bizbar{ display:flex; align-items:center; gap:5px; padding:5px; border:1.5px solid var(--line-soft); border-radius:14px; background:color-mix(in oklab,var(--surface) 74%,transparent); margin-bottom:2px; }
.oc-biztab svg{ width:16px; height:16px; flex:none; opacity:.7; transition:.16s; }
.oc-biztab.on svg{ opacity:1; }
.oc-biztab.on{ font-weight:900; }
.oc-biztab.on[data-biz="normal"]{ color:#fff !important; background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); box-shadow:0 6px 18px -6px var(--v-signature); }
.oc-biztab.on[data-biz="crown"]{ color:#2a1500 !important; background:linear-gradient(135deg,#ffe08a,#ffc53d); box-shadow:0 6px 18px -6px #ffc53d; }
.oc-biztab.on[data-biz="raffle"]{ color:#2a1500 !important; background:linear-gradient(135deg,var(--a-amber),#ff9f43); box-shadow:0 6px 18px -6px var(--a-amber); }
.oc-biztab.on[data-biz="gifts"]{ color:#fff !important; background:linear-gradient(135deg,var(--a-pink),var(--a-coral)); box-shadow:0 6px 18px -6px var(--a-coral); }
.oc-biztab{ position:relative; display:inline-flex; align-items:center; gap:8px; font-family:var(--cn); font-weight:800;
  font-size:14.5px; letter-spacing:-.01em; padding:10px 16px; border:0; border-radius:10px; background:transparent; color:var(--text-mute); cursor:pointer; transition:.16s; white-space:nowrap; }
.oc-biztab:hover{ color:var(--text-dim); background:color-mix(in oklab,var(--text) 5%,transparent); }
.oc-biztab:hover svg{ opacity:1; }
.oc-biztab .nb{ position:absolute; top:7px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--a-coral); color:#fff; font-family:var(--mono); font-weight:700; font-size:9.5px; display:grid; place-items:center; }
/* 游戏价格入口(2026-07-29 用户:太不起眼):灰字→亮色描边药丸 */
.oc-util{ margin-left:auto; align-self:center; display:inline-flex; align-items:center; gap:7px; font-family:var(--cn); font-weight:800; font-size:14px; letter-spacing:-.01em;
  color:#3a2a06; background:linear-gradient(135deg, var(--a-amber,#ffc53d), color-mix(in oklab, var(--a-amber,#ffc53d) 78%, #ff9d2e));
  border:0; padding:9px 17px; border-radius:999px; cursor:pointer; text-decoration:none; transition:.16s;
  box-shadow:0 6px 18px -8px color-mix(in oklab, var(--a-amber,#ffc53d) 75%, transparent); }
.oc-util .arw{ transition:transform .16s; }
.oc-util:hover{ filter:brightness(1.06); box-shadow:0 9px 24px -8px color-mix(in oklab, var(--a-amber,#ffc53d) 85%, transparent); }
.oc-util:hover .arw{ transform:translateX(3px); }
/* 工具栏(子tab + 操作) */
.oc-toolbar{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; padding:18px 0 6px; }
.oc-toolbar .acts{ margin-left:auto; display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; }
/* 状态分区标题 */
.oc-sec{ display:flex; align-items:center; gap:12px; margin:24px 0 14px; }
.oc-sec .ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; }
.oc-sec .ic svg{ width:16px; height:16px; }
.oc-sec b{ font-family:var(--cn); font-weight:800; font-size:18px; letter-spacing:-.01em; color:var(--text); white-space:nowrap; }
.oc-sec .n{ font-family:var(--display); font-style:italic; font-weight:800; font-size:16px; line-height:1; min-width:25px; height:25px; padding:0 8px; border-radius:999px; display:inline-grid; place-items:center; }
.oc-sec .hint{ font-family:var(--cn); font-size:11.5px; color:var(--text-mute); white-space:nowrap; }
.oc-sec .rule{ flex:1; height:1.5px; border-radius:2px; }
.oc-sec[data-tone="live"] .ic, .oc-sec[data-tone="done"] .ic{ background:color-mix(in oklab,var(--ok) 18%,transparent); color:var(--ok); }
.oc-sec[data-tone="live"] .n, .oc-sec[data-tone="done"] .n{ background:color-mix(in oklab,var(--ok) 16%,transparent); color:var(--ok); }
.oc-sec[data-tone="live"] .rule, .oc-sec[data-tone="done"] .rule{ background:linear-gradient(90deg,color-mix(in oklab,var(--ok) 30%,transparent),transparent); }
.oc-sec[data-tone="wait"] .ic{ background:color-mix(in oklab,var(--a-amber) 18%,transparent); color:var(--a-amber); }
.oc-sec[data-tone="wait"] .n{ background:color-mix(in oklab,var(--a-amber) 16%,transparent); color:var(--a-amber); }
.oc-sec[data-tone="wait"] .rule{ background:linear-gradient(90deg,color-mix(in oklab,var(--a-amber) 30%,transparent),transparent); }
.oc-sec[data-tone="open"] .ic{ background:color-mix(in oklab,var(--a-cyan) 18%,transparent); color:var(--a-cyan); }
.oc-sec[data-tone="open"] .n{ background:color-mix(in oklab,var(--a-cyan) 16%,transparent); color:var(--a-cyan); }
.oc-sec[data-tone="open"] .rule{ background:linear-gradient(90deg,color-mix(in oklab,var(--a-cyan) 30%,transparent),transparent); }
.oc-sec[data-tone="void"] .ic{ background:color-mix(in oklab,var(--text-mute) 16%,transparent); color:var(--text-mute); }
.oc-sec[data-tone="void"] .n{ background:color-mix(in oklab,var(--text-mute) 16%,transparent); color:var(--text-mute); }
.oc-sec[data-tone="void"] .rule{ background:linear-gradient(90deg,var(--line),transparent); }
/* 面板 / 列表容器 */
.oc-panel{ display:none; }
.oc-panel.on{ display:block; }
.oc-list{ display:flex; flex-direction:column; gap:11px; }
.oc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:880px){ .oc-grid{ grid-template-columns:1fr; } }
.oc-empty{ padding:46px; text-align:center; font-family:var(--mono); font-size:13px; color:var(--text-mute); border:1.5px dashed var(--line); border-radius:var(--r-sm); }
.oc-tip{ font-family:var(--cn); font-size:12.5px; color:var(--text-mute); margin:2px 0 10px; }
.oc-tip b{ color:var(--text-dim); }
/* bosshint(纯老板形态徽标) */
.oc-bosshint{ display:inline-flex; align-items:center; gap:7px; font-family:var(--hud); font-weight:700; font-size:12px; padding:6px 12px; border-radius:999px;
  background:color-mix(in oklab,var(--v-signature) 16%,transparent); color:var(--v-bright); border:1px solid color-mix(in oklab,var(--v-signature) 30%,transparent); }

/* ============================================================
   1) 进行中订单卡 · 大计时器计费表
   用法:companion / boss 进行中(bill_status=metering|paused)卡内
   注入 meterHtml(o) 生成的 .oc-meter。
   ============================================================ */
.oc-meter{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:12px; padding:13px 16px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
}
html[data-theme="dark"] .oc-meter{ background:rgba(255,255,255,.04); }
.oc-meter.paused{ opacity:.82; }
.oc-clock{
  font-family:var(--display); font-style:italic; font-weight:800;
  font-size:30px; line-height:1; letter-spacing:.01em; color:var(--a-mint);
  display:flex; align-items:baseline; gap:5px; font-variant-numeric:tabular-nums;
}
.oc-clock small{ font-family:var(--mono); font-style:normal; font-size:11px; font-weight:500; color:var(--text-mute); }
.oc-meter.paused .oc-clock{ color:var(--busy); }
.oc-live{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--ok); box-shadow:0 0 9px var(--ok); animation:oc-pulse 1.4s infinite; }
.oc-meter.paused .oc-live{ background:var(--busy); box-shadow:0 0 9px var(--busy); animation:none; }
.oc-calc{ font-family:var(--mono); font-size:12.5px; color:var(--text-mute); }
.oc-calc b{ color:var(--text-dim); }
.oc-est{ margin-left:auto; font-family:var(--cn); font-size:12.5px; color:var(--text-dim); white-space:nowrap; }
.oc-est b{ font-family:var(--display); font-style:italic; font-weight:800; font-size:20px; color:var(--a-mint); margin:0 2px; }
@keyframes oc-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* 老板侧「进行中」监看卡:被动等待感,不像操作台 */
.oc-watch{ margin-top:12px; padding:14px 16px; border-radius:14px;
  background:color-mix(in oklab,var(--ok) 7%,rgba(255,255,255,.03)); border:1px solid color-mix(in oklab,var(--ok) 26%,var(--line-soft)); }
.oc-watch.paused{ background:color-mix(in oklab,var(--busy) 8%,rgba(255,255,255,.03)); border-color:color-mix(in oklab,var(--busy) 26%,var(--line-soft)); }
.oc-watch .ow-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.oc-watch .ow-ic{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; font-size:19px; background:color-mix(in oklab,var(--ok) 18%,transparent); }
.oc-watch.paused .ow-ic{ background:color-mix(in oklab,var(--busy) 18%,transparent); }
.oc-watch .ow-t{ font-family:var(--cn); font-weight:800; font-size:14.5px; color:var(--text); }
.oc-watch .ow-t em{ font-style:normal; color:var(--ok); }
.oc-watch.paused .ow-t em{ color:var(--busy); }
.oc-watch .ow-mini{ font-family:var(--mono); font-size:11px; color:var(--text-mute); margin-top:2px; }
.oc-watch .ow-mini .oc-clock{ font-size:12px; display:inline; color:var(--busy); font-family:var(--mono); font-style:normal; font-weight:700; }
.oc-watch .ow-right{ margin-left:auto; text-align:right; }
.oc-watch .ow-q{ font-family:var(--mono); font-size:12.5px; color:var(--text-dim); }
.oc-watch .ow-q b{ color:var(--text); }
.oc-watch .ow-e{ font-family:var(--cn); font-size:11px; color:var(--text-mute); margin-top:2px; }
.oc-watch .ow-e b{ font-family:var(--display); font-style:italic; color:var(--text-dim); margin:0 1px; }
.oc-watch .ow-note{ margin-top:12px; display:flex; gap:9px; align-items:flex-start; padding:9px 12px; border-radius:10px;
  background:color-mix(in oklab,var(--v-bright) 9%,transparent); border:1px solid color-mix(in oklab,var(--v-bright) 22%,var(--line-soft));
  font-family:var(--cn); font-size:12.5px; line-height:1.55; color:var(--text-dim); }
.oc-watch .ow-note b{ color:var(--text); }
.oc-watch .ow-step{ flex:none; font-size:15px; line-height:1.3; }
@media(max-width:560px){ .oc-watch .ow-right{ margin-left:0; text-align:left; width:100%; } }

/* 价格提示:预计价 ≠ 最终结算 */
.oc-pricehint{
  display:flex; gap:6px; align-items:flex-start; margin-top:9px;
  font-family:var(--cn); font-size:11.5px; line-height:1.55; color:var(--text-mute);
}
.oc-pricehint .qi{
  flex:none; width:15px; height:15px; border-radius:50%;
  border:1.5px solid var(--text-mute); display:grid; place-items:center;
  font-size:10px; font-style:italic; font-family:var(--display); margin-top:1px;
}
.oc-pricehint b{ color:var(--text-dim); font-weight:600; }
.oc-rulelink{ color:var(--a-mint); font-weight:600; cursor:pointer; white-space:nowrap; }
.oc-rulelink:hover{ text-decoration:underline; }

/* ============================================================
   2) 接单全流程 / 派单全流程 指南条 .oc-flow
   ============================================================ */
.oc-flow{
  margin-bottom:14px; padding:14px 16px; border-radius:16px;
  border:1.5px solid color-mix(in oklab,var(--a-coral) 24%,var(--line));
  background:
    radial-gradient(130% 130% at 0% 0%, color-mix(in oklab,var(--a-coral) 8%,transparent), transparent 56%),
    var(--card-grad);
}
.oc-flow.boss{ border-color:color-mix(in oklab,var(--v-signature) 26%,var(--line));
  background:radial-gradient(130% 130% at 0% 0%, color-mix(in oklab,var(--v-signature) 8%,transparent), transparent 56%), var(--card-grad); }
.oc-flow-head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
.oc-flow-ic{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,var(--a-amber),var(--a-coral)); font-size:15px; }
.oc-flow.boss .oc-flow-ic{ background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); }
.oc-flow-head b{ font-family:var(--cn); font-weight:800; font-size:15px; color:var(--text); }
.oc-flow-head .sub{ font-family:var(--cn); font-size:12px; color:var(--text-mute); }
.oc-flow-steps{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.oc-fs{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:9px;
  background:rgba(255,255,255,.05); border:1px solid var(--line-soft);
  font-family:var(--hud); font-weight:700; font-size:12.5px; color:var(--text-dim); }
.oc-fs .fn{ width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:10px; color:#231600; background:linear-gradient(135deg,var(--a-amber),var(--a-coral)); }
.oc-flow.boss .oc-fs .fn{ background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); color:#fff; }
.oc-fs.done{ color:var(--ok); border-color:color-mix(in oklab,var(--ok) 30%,transparent); background:color-mix(in oklab,var(--ok) 10%,transparent); }
.oc-fs.done .fn{ background:var(--ok); color:#0c2a1c; }
.oc-flow-arrow{ color:var(--text-mute); font-size:12px; }
.oc-flow-note{ display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:10px 13px; border-radius:10px;
  background:color-mix(in oklab,var(--a-amber) 9%,transparent); border:1px solid color-mix(in oklab,var(--a-amber) 22%,var(--line));
  font-family:var(--cn); font-size:12.5px; line-height:1.6; color:var(--text-dim); }
.oc-flow.boss .oc-flow-note{ background:color-mix(in oklab,var(--v-signature) 8%,transparent); border-color:color-mix(in oklab,var(--v-signature) 22%,var(--line)); }
.oc-flow-note b{ color:var(--text); font-weight:700; }

/* ============================================================
   3) 置顶进行中单(陪玩同时只接一单)
   ============================================================ */
.oc-pinwrap{ margin-bottom:16px; }
.oc-pin-lbl{ display:flex; align-items:center; gap:8px; margin-bottom:9px;
  font-family:var(--hud); font-weight:700; font-size:12px; letter-spacing:.04em; color:var(--a-mint); }
.oc-pin-lbl .pd{ width:7px; height:7px; border-radius:50%; background:var(--a-mint); box-shadow:0 0 8px var(--a-mint); animation:oc-pulse 1.4s infinite; }
.oc-pin-lbl .rule{ flex:1; height:1.5px; border-radius:2px; background:linear-gradient(90deg,color-mix(in oklab,var(--a-mint) 32%,transparent),transparent); }
/* 复用 .ocard2,加一层薄荷高亮 */
.ocard2.oc-pinned{ position:relative; border-color:color-mix(in oklab,var(--a-mint) 42%,var(--line));
  box-shadow:0 14px 38px -22px color-mix(in oklab,var(--a-mint) 70%, #000); }
.ocard2.oc-pinned::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--a-mint),var(--ok)); }
/* 迷你流程轴(本单当前在哪一步) */
.oc-mini{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:13px 0; }
.oc-mn{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:8px;
  font-family:var(--hud); font-weight:700; font-size:11.5px; background:rgba(255,255,255,.04);
  border:1px solid var(--line-soft); color:var(--text-mute); }
.oc-mn .fn{ width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:9.5px; background:rgba(255,255,255,.1); color:var(--text-dim); }
.oc-mn.done{ color:var(--ok); border-color:color-mix(in oklab,var(--ok) 28%,transparent); background:color-mix(in oklab,var(--ok) 9%,transparent); }
.oc-mn.done .fn{ background:var(--ok); color:#0c2a1c; }
.oc-mn.now{ color:var(--a-mint); border-color:var(--a-mint); background:color-mix(in oklab,var(--a-mint) 13%,transparent); box-shadow:0 0 0 1px var(--a-mint); }
.oc-mn.now .fn{ background:var(--a-mint); color:#0c2a1c; }
.oc-mn-sep{ color:var(--text-mute); font-size:11px; }

/* ============================================================
   4) @资质标签 + 特别需求 + 匿名(派单需求展示)
   ============================================================ */
.oc-reqline{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:7px 0; }
.oc-atag{ display:inline-flex; align-items:center; gap:3px; font-family:var(--cn); font-weight:700;
  font-size:12px; padding:4px 10px; border-radius:7px; line-height:1.2; }
.oc-atag .at{ opacity:.6; font-family:var(--mono); }
.oc-atag.game{ background:color-mix(in oklab,var(--v-bright) 18%,transparent); color:var(--v-bright); }
.oc-atag.qual{ background:color-mix(in oklab,var(--a-cyan) 16%,transparent); color:var(--a-cyan); }
.oc-atag.gender{ background:color-mix(in oklab,var(--a-pink) 17%,transparent); color:var(--a-pink); }
.oc-anon{ display:inline-flex; align-items:center; gap:5px; font-family:var(--hud); font-weight:700;
  font-size:10.5px; padding:4px 9px; border-radius:7px; color:var(--text-dim);
  background:color-mix(in oklab,var(--text-mute) 18%,transparent); border:1px solid var(--line-soft); }
.oc-needline{ font-family:var(--cn); font-size:13px; line-height:1.55; color:var(--text-dim);
  padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--line-soft); }
.oc-needline b{ color:var(--v-bright); font-weight:700; }
html[data-theme="dark"] .oc-needline b{ color:var(--v-bright); }
.oc-needline .nl{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--text-mute); margin-right:7px; }

/* ============================================================
   5) 统一试听控件 .oc-vbtn(普通/冠名一致 · 播放钮 + 声波)
   替代原 .grab2 .mini[data-vplay] 的纯文字"试听"。
   ============================================================ */
.oc-vbtn{ display:inline-flex; align-items:center; gap:8px; padding:5px 13px 5px 5px; border-radius:999px;
  border:1.5px solid color-mix(in oklab,var(--a-cyan) 38%,var(--line)); background:color-mix(in oklab,var(--a-cyan) 10%,transparent);
  cursor:pointer; transition:.16s; font-family:var(--hud); font-weight:700; font-size:11.5px; color:var(--a-cyan);
  white-space:nowrap; flex:none; }   /* 手机窄容器下禁止文字竖排换行——否则胶囊被撑成大圆(2026-07-14「本单新录」手机截图) */
.oc-vbtn:hover{ border-color:var(--a-cyan); background:color-mix(in oklab,var(--a-cyan) 18%,transparent); transform:translateY(-1px); }
.oc-vbtn .pp{ width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--a-cyan),var(--v-bright)); animation:oc-vbring 2.2s ease-out infinite; }
.oc-vbtn .pp svg{ width:10px; height:10px; fill:#fff; margin-left:1.5px; }
.oc-vbtn .eq{ display:flex; align-items:center; gap:2.5px; height:13px; }
.oc-vbtn .eq i{ width:2.5px; border-radius:2px; background:var(--a-cyan); transform-origin:center;
  animation:oc-vbeq .9s ease-in-out infinite; animation-play-state:paused; }
.oc-vbtn:hover .eq i{ animation-play-state:running; }
.oc-vbtn .eq i:nth-child(1){ height:6px; animation-delay:0s; }
.oc-vbtn .eq i:nth-child(2){ height:12px; animation-delay:.15s; }
.oc-vbtn .eq i:nth-child(3){ height:8px; animation-delay:.3s; }
.oc-vbtn .eq i:nth-child(4){ height:10px; animation-delay:.45s; }
@keyframes oc-vbeq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
@keyframes oc-vbring{ 0%{ box-shadow:0 0 0 0 color-mix(in oklab,var(--a-cyan) 45%,transparent); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }

/* ===== crown companion card (冠名接单 · 申请中/偿还中富卡 .cw 系) ===== */
.cw{ position:relative; border:1.5px solid var(--line); border-radius:16px; background:var(--card-grad); overflow:hidden; margin-bottom:12px; --sc:var(--a-amber); }
.cw:hover{ overflow:visible; z-index:20; }
.cw::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,#ffe08a,#ffc53d); z-index:1; border-radius:16px 0 0 16px; }
.cw::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:150px; pointer-events:none; background:linear-gradient(90deg,color-mix(in oklab,#ffc53d 10%,transparent),transparent); }
.cw[data-dim]{ opacity:.55; }
.cw-main{ position:relative; display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:15px 18px 15px 22px; }
.cw-lead{ display:flex; align-items:center; gap:12px; width:240px; min-width:200px; }
.cw-lead .av{ width:46px; height:46px; font-size:17px; box-shadow:0 0 0 2px color-mix(in oklab,#ffc53d 50%,transparent), inset 0 0 0 2px rgba(255,255,255,.2); }
.cw-name{ font-family:var(--cn); font-weight:800; font-size:15.5px; color:var(--text); display:flex; align-items:center; gap:7px;  flex-wrap:wrap; }
.cw-id{ font-family:var(--hud); font-weight:700; font-size:9px; letter-spacing:.05em; padding:3px 6px; border-radius:6px; color:#231600; background:linear-gradient(135deg,#ffe08a,#ffc53d); white-space:nowrap; flex:none; }
.cw-subline{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.cw-st{ display:inline-flex; align-items:center; gap:6px; font-family:var(--hud); font-weight:800; font-size:12px; padding:5px 11px; border-radius:999px; white-space:nowrap;
  color:var(--sc); background:color-mix(in oklab,var(--sc) 16%,transparent); border:1px solid color-mix(in oklab,var(--sc) 38%,transparent); }
.cw-st .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 7px currentColor; }
.cw-st.s-hours{ --sc:var(--a-amber); } .cw-st.s-active{ --sc:var(--a-cyan); } .cw-st.s-done{ --sc:var(--ok); }
.cw-submeta{ font-family:var(--mono); font-size:10.5px; color:var(--text-mute); margin-top:5px; }
.cw-tier{ display:inline-flex; align-items:center; gap:6px; font-family:var(--hud); font-weight:800; font-size:11.5px; padding:6px 11px 6px 9px; border-radius:9px; color:#231600; background:var(--tg,linear-gradient(135deg,#ffe08a,#ffc53d)); white-space:nowrap; flex:none; }
.cw-tier svg{ width:13px; height:13px; }
.cw-mid{ flex:1 1 240px; min-width:200px; display:flex; align-items:center; gap:14px; }
.cw-req{ font-family:var(--cn); font-size:12.5px; color:var(--text-dim); }
.cw-req b{ color:var(--text); }
.cw-body{ position:relative; display:flex; flex-direction:column; gap:9px; padding:0 18px 15px 22px; }
.cw-wall-head{ display:flex; align-items:center; gap:8px; }
.cc-live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--hud); font-weight:700; font-size:11px; color:var(--a-amber); }
.cc-live .dot{ width:7px; height:7px; border-radius:50%; background:var(--a-amber); box-shadow:0 0 7px var(--a-amber); }
.cw-apps{ display:none; flex-direction:column; gap:8px; margin-top:10px; }
.cw.show-apps .cw-apps{ display:flex; }
.cw.show-apps .cw-wall-head .chev{ transform:rotate(180deg); }
.cw-acts{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.cw-acts .note{ font-family:var(--cn); font-size:13px; color:var(--text-dim); }
.cw-btn{ font-family:var(--hud); font-weight:700; font-size:12.5px; padding:9px 15px; border-radius:10px; border:1.5px solid var(--line); background:rgba(255,255,255,.04); color:var(--text-dim); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.cw-btn svg{ width:14px; height:14px; }
.cw-btn:hover{ color:var(--text); border-color:#ffc53d; }
.cw-btn.primary{ border-color:transparent; color:#231600; background:linear-gradient(135deg,#ffe08a,#ffc53d); box-shadow:0 8px 20px -12px #ffc53d; }
.cw-btn.danger{ color:var(--a-coral); border-color:color-mix(in oklab,var(--a-coral) 34%,transparent); }
/* 偿还中:还需/进度条/申报时间线 */
.cw-owed{ flex:none; display:flex; flex-direction:column; gap:3px; }
.cw-owed .ov{ font-family:var(--display); font-style:italic; font-weight:800; font-size:24px; line-height:1; color:var(--a-amber); }
.cw-owed .ov small{ font-family:var(--cn); font-style:normal; font-size:12px; font-weight:600; color:var(--text-mute); margin-left:2px; }
.cw-owed .ok2{ font-family:var(--cn); font-size:11px; color:var(--text-mute); }
.cw-prog{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:7px; }
.cw-prog .lab{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--cn); font-size:12px; color:var(--text-dim); white-space:nowrap; }
.cw-prog .lab .hrs{ font-family:var(--mono); font-size:11.5px; color:var(--text-mute); }
.cw-prog .lab .hrs b{ color:var(--a-amber); }
.cw-track{ height:9px; border-radius:99px; background:rgba(255,255,255,.07); overflow:visible; }
.cw-fill{ position:relative; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--a-cyan),var(--v-neon)); box-shadow:0 0 10px -2px var(--a-cyan); }
.cw-fill::after{ content:""; position:absolute; right:0; top:50%; transform:translate(50%,-50%); width:14px; height:14px; border-radius:50%; background:var(--bg-2); border:3px solid var(--a-cyan); box-shadow:0 0 8px -1px var(--a-cyan); }
.cw-fill.done::after{ border-color:var(--ok); box-shadow:0 0 8px -1px var(--ok); }
.cw-fill.done{ background:linear-gradient(90deg,var(--ok),oklch(0.84 0.13 152)); }
.cw-pct{ font-family:var(--display); font-style:italic; font-weight:800; font-size:24px; line-height:1; color:var(--a-cyan); flex:none; }
.cw-pct.done{ color:var(--ok); }
.cw-rp{ display:flex; align-items:center; gap:11px; font-family:var(--cn); font-size:13.5px; color:var(--text-dim); padding:11px 15px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid var(--line-soft); }
.cw-rp b{ color:var(--a-amber); font-weight:800; font-family:var(--display); font-style:italic; font-size:17px; }
.cw-rp .ts{ margin-left:auto; font-family:var(--hud); font-weight:700; font-size:12.5px; }
.cw-rp .ts.ok{ color:var(--ok); } .cw-rp .ts.pend{ color:var(--a-amber); } .cw-rp .ts.no{ color:var(--a-coral); }
.cw-rp .rpt{ font-family:var(--mono); font-size:11px; color:var(--text-mute); }
.cw-tl{ position:relative; padding-left:20px; padding-right:6px; }
.cw-rp .ts{ margin-right:6px; }
.cw-tl::before{ content:""; position:absolute; left:5px; top:17px; bottom:17px; width:2px; background:var(--line-soft); }
.cw-tl .cw-rp{ position:relative; margin-bottom:8px; }
.cw-tl .cw-rp:last-child{ margin-bottom:0; }
.cw-tl .cw-rp::before{ content:""; position:absolute; left:-20px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:var(--a-amber); border:2px solid var(--bg-2); box-shadow:0 0 0 2px color-mix(in oklab,var(--a-amber) 45%,transparent); z-index:1; }
.cw-tl .cw-rp.done::before{ background:var(--ok); box-shadow:0 0 0 2px color-mix(in oklab,var(--ok) 45%,transparent); }
/* 已完成冠名卡:cw 富卡 + 可展开申报时间线 */
.cw.done-card{ transition:.15s; opacity:.9; }
.cw.done-card.show-detail{ opacity:1; }
.cw.done-card.cvoid{ opacity:.6; }
.cw.done-card:hover{ opacity:1; }
.cw.done-card:not(.show-detail) .cc-detail{ display:none; }
.cw.done-card.show-detail .cd-chev svg{ transform:rotate(180deg); }

/* 区段状态标题条(每个 surface 顶部:图标+状态名+数量+提示句) */
.dh-gt{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.dh-gt .ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; background:color-mix(in oklab,var(--a-amber) 18%,transparent); color:var(--a-amber); }
.dh-gt .ic svg{ width:16px; height:16px; }
.dh-gt b{ font-family:var(--cn); font-weight:800; font-size:18px; letter-spacing:-.01em; color:var(--text); white-space:nowrap; }
.dh-gt .n{ font-family:var(--display); font-style:italic; font-weight:800; font-size:16px; line-height:1; min-width:25px; height:25px; padding:0 8px; border-radius:999px; display:inline-grid; place-items:center; background:color-mix(in oklab,var(--a-amber) 16%,transparent); color:var(--a-amber); }
.dh-gt .hintx{ font-family:var(--cn); font-size:11.5px; color:var(--text-mute); white-space:nowrap; }
.dh-gt .rule{ flex:1; height:1.5px; border-radius:2px; background:linear-gradient(90deg,color-mix(in oklab,var(--a-amber) 30%,transparent),transparent); }
.dh-gt.s-live .ic{ background:color-mix(in oklab,var(--ok) 18%,transparent); color:var(--ok); } .dh-gt.s-live .n{ background:color-mix(in oklab,var(--ok) 16%,transparent); color:var(--ok); } .dh-gt.s-live .rule{ background:linear-gradient(90deg,color-mix(in oklab,var(--ok) 30%,transparent),transparent); }
.dh-gt.s-wait .ic{ background:color-mix(in oklab,var(--a-amber) 18%,transparent); color:var(--a-amber); } .dh-gt.s-wait .n{ background:color-mix(in oklab,var(--a-amber) 16%,transparent); color:var(--a-amber); } .dh-gt.s-wait .rule{ background:linear-gradient(90deg,color-mix(in oklab,var(--a-amber) 30%,transparent),transparent); }
.dh-gt.s-open .ic{ background:color-mix(in oklab,var(--a-cyan) 18%,transparent); color:var(--a-cyan); } .dh-gt.s-open .n{ background:color-mix(in oklab,var(--a-cyan) 16%,transparent); color:var(--a-cyan); } .dh-gt.s-open .rule{ background:linear-gradient(90deg,color-mix(in oklab,var(--a-cyan) 30%,transparent),transparent); }
.dh-gt.s-done .ic{ background:color-mix(in oklab,var(--ok) 18%,transparent); color:var(--ok); } .dh-gt.s-done .n{ background:color-mix(in oklab,var(--ok) 16%,transparent); color:var(--ok); } .dh-gt.s-done .rule{ background:linear-gradient(90deg,color-mix(in oklab,var(--ok) 30%,transparent),transparent); }
.dh-gt.s-void .ic{ background:color-mix(in oklab,var(--text-mute) 16%,transparent); color:var(--text-mute); } .dh-gt.s-void .n{ background:color-mix(in oklab,var(--text-mute) 16%,transparent); color:var(--text-mute); } .dh-gt.s-void .rule{ background:linear-gradient(90deg,var(--line),transparent); }

/* ===== 智能动作提醒 banner(个人动作中心) ===== */
.oc-actbar{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; padding:12px 16px; border-radius:14px; margin-bottom:18px; background:var(--card-grad); border:1.5px solid var(--line); }
.oc-actbar[hidden]{ display:none; }
.oc-actbar .ab-side{ display:none; align-items:center; gap:13px; flex:1; flex-wrap:wrap; width:100%; }
.oc-actbar[data-role=player] .ab-side[data-for=player]{ display:flex; }
.oc-actbar[data-role=boss] .ab-side[data-for=boss]{ display:flex; }
.ab-cta{ display:flex; align-items:center; gap:12px; padding:10px 16px 10px 12px; border-radius:12px; cursor:pointer; border:1.5px solid transparent; text-align:left; transition:.16s; background:transparent; }
.ab-cta:hover{ transform:translateY(-1px); }
.ab-cta .ai{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none; font-size:19px; }
.ab-cta .at{ font-family:var(--cn); font-weight:800; font-size:14.5px; color:var(--text); line-height:1.25; }
.ab-cta .at em{ font-style:italic; font-family:var(--display); font-weight:800; font-size:17px; margin:0 1px; }
.ab-cta .as{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--text-mute); margin-top:3px; }
.ab-cta .ago{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--hud); font-weight:700; font-size:12px; padding:7px 13px; border-radius:999px; white-space:nowrap; }
.ab-cta .ago svg{ width:12px; height:12px; }
.ab-cta[data-tone=act]{ background:color-mix(in oklab,var(--a-amber) 11%,var(--surface)); border-color:color-mix(in oklab,var(--a-amber) 32%,var(--line)); }
.ab-cta[data-tone=act] .ai{ background:color-mix(in oklab,var(--a-amber) 20%,transparent); }
.ab-cta[data-tone=act] .ago{ background:linear-gradient(135deg,var(--a-amber),#ffce5a); color:#231600; }
.ab-cta[data-tone=act] .at em{ color:var(--a-amber); }
.ab-cta[data-tone=live]{ background:color-mix(in oklab,var(--a-cyan) 10%,var(--surface)); border-color:color-mix(in oklab,var(--a-cyan) 30%,var(--line)); }
.ab-cta[data-tone=live] .ai{ background:color-mix(in oklab,var(--a-cyan) 18%,transparent); }
.ab-cta[data-tone=live] .ago{ background:color-mix(in oklab,var(--a-cyan) 18%,transparent); color:var(--a-cyan); }
.ab-cta[data-tone=live] .at em{ color:var(--a-cyan); }
.ab-cta[data-tone=opp]{ background:var(--surface); border-color:var(--line); }
.ab-cta[data-tone=opp] .ai{ background:rgba(255,255,255,.06); }
.ab-cta[data-tone=opp] .ago{ background:rgba(255,255,255,.09); color:var(--text-dim); border:1px solid var(--line); }
.ab-cta[data-tone=opp] .at em{ color:var(--text); }
.ab-lead{ display:inline-flex; align-items:center; gap:7px; flex:none; font-family:var(--hud); font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--text-mute); padding-right:3px; }
.ab-lead .pd{ width:7px; height:7px; border-radius:50%; background:var(--a-amber); box-shadow:0 0 8px var(--a-amber); animation:dp-pulse 1.5s infinite; }
@keyframes dp-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.ab-chips{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.ab-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--hud); font-weight:700; font-size:12px; padding:7px 12px; border-radius:999px; cursor:pointer; border:1.5px solid var(--line); background:var(--surface); color:var(--text-dim); transition:.15s; white-space:nowrap; }
.ab-chip:hover{ color:var(--text); transform:translateY(-1px); }
.ab-chip .cn{ min-width:17px; height:17px; padding:0 5px; border-radius:99px; display:inline-grid; place-items:center; font-family:var(--mono); font-size:10px; }
.ab-chip[data-tone=act]{ color:var(--a-amber); border-color:color-mix(in oklab,var(--a-amber) 30%,var(--line)); }
.ab-chip[data-tone=act] .cn{ background:color-mix(in oklab,var(--a-amber) 20%,transparent); }
.ab-chip[data-tone=live]{ color:var(--a-cyan); border-color:color-mix(in oklab,var(--a-cyan) 28%,var(--line)); }
.ab-chip[data-tone=live] .cn{ background:color-mix(in oklab,var(--a-cyan) 18%,transparent); }
.ab-chip[data-tone=opp]{ color:var(--text-mute); }
.ab-chip[data-tone=opp] .cn{ background:rgba(255,255,255,.08); color:var(--text-dim); }
@media(max-width:760px){ .oc-actbar .ab-side{ align-items:flex-start; } .ab-cta{ width:100%; } .ab-chips{ margin-left:0; width:100%; } }

/* 流程指南条折叠(默认收起,点击 head 展开 —— 与「什么是冠名」一致) */
.oc-flow-head{ cursor:pointer; }
.oc-flow.collapsed .oc-flow-head{ margin-bottom:0; }
.oc-flow-tog{ margin-left:auto; flex:none; width:26px; height:26px; border-radius:7px; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--text-mute); cursor:pointer; transition:.18s; }
.oc-flow-tog:hover{ color:var(--text); border-color:color-mix(in oklab,var(--a-amber) 30%,var(--line)); }
.oc-flow-tog svg{ width:14px; height:14px; transition:.2s; }
.oc-flow.collapsed .oc-flow-tog svg{ transform:rotate(180deg); }
.oc-flow-body{ display:flex; flex-direction:column; gap:12px; }
.oc-flow.collapsed .oc-flow-body{ display:none; }

/* ============================================================
   6) 冠名面板结构重组 · 状态子 tab(沿用 .dpcr-tabs 容器)
   招募卡内嵌申请人留言墙复用既有 .cc-wall / .grab2。
   "愿偿还 Xh" pill + "选 TA·送出冠名" 按钮为本次新增。
   ============================================================ */
.oc-subtabs{ display:inline-flex; gap:3px; padding:4px; border-radius:13px;
  background:var(--surface-2); border:1.5px solid var(--line-soft); flex-wrap:wrap; }
.oc-subtab{ display:inline-flex; align-items:center; gap:7px; font-family:var(--hud); font-weight:700;
  font-size:13px; padding:9px 15px; border-radius:9px; border:0; background:transparent;
  color:var(--text-mute); cursor:pointer; transition:.15s; white-space:nowrap; }
.oc-subtab:hover{ color:var(--text-dim); }
.oc-subtab.on{ color:#fff; background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); box-shadow:var(--shadow-sm); }
.oc-subtab.on .pill{ background:rgba(255,255,255,.28); color:#fff; }
.oc-subtab .pill{ min-width:18px; height:18px; padding:0 5px; border-radius:99px; display:inline-grid;
  place-items:center; font-family:var(--mono); font-size:10px; font-weight:700;
  background:color-mix(in oklab,var(--text) 9%,transparent); color:var(--text-dim); }
/* 待处理小红角标:有需要本人处理的动作时(被选中待报价 / 待选人 / 待确认付款)*/
.oc-subtab .pill-alert{ background:var(--a-coral); color:#fff; box-shadow:0 0 0 0 color-mix(in oklab,var(--a-coral) 60%,transparent); animation:ocAlertPulse 1.8s ease-out infinite; }
.oc-subtab.has-alert{ color:var(--a-coral); }
@keyframes ocAlertPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in oklab,var(--a-coral) 55%,transparent); } 70%{ box-shadow:0 0 0 6px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
/* 关键行动按钮(报价开始/开始计费)发光脉冲,抓眼球 */
.oc-cta-pulse{ animation:ocCtaGlow 1.5s ease-in-out infinite; }
.oc-cta-pulse:hover{ animation:none; }
@keyframes ocCtaGlow{ 0%,100%{ box-shadow:0 8px 22px -10px var(--a-coral), 0 0 0 0 transparent; } 50%{ box-shadow:0 10px 30px -8px var(--a-coral), 0 0 18px 3px color-mix(in oklab,var(--a-coral) 50%,transparent); } }
/* 接单中:「我是陪玩」角色卡高亮闪烁(即使在老板视角被暗化也强制醒目,引导去查看进行中单)*/
.oc-role[data-r="player"].busy{ opacity:1 !important; border-color:var(--a-mint) !important; background:color-mix(in oklab,var(--a-mint) 14%,var(--surface)) !important; animation:ocRoleBusy 1.5s ease-in-out infinite; }
.oc-role[data-r="player"].busy .rt small{ color:var(--a-mint) !important; font-weight:700; }
.oc-role[data-r="player"].busy .ri{ background:linear-gradient(135deg,var(--a-mint),oklch(0.7 0.16 165)) !important; }
@keyframes ocRoleBusy{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in oklab,var(--a-mint) 52%,transparent); } 50%{ box-shadow:0 0 0 5px transparent, 0 0 16px 2px color-mix(in oklab,var(--a-mint) 45%,transparent); } }
/* 可接单数红角标:biz tab(普通/冠名/有奖)各档可接数 + 「我是陪玩」角色卡总可接数 */
.oc-biztab .oc-bizbadge{ min-width:17px; height:17px; padding:0 5px; border-radius:99px; display:inline-grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:800; background:var(--a-coral); color:#fff; line-height:1; }
.oc-role{ position:relative; }
.oc-role .oc-rolebadge{ position:absolute; top:10px; right:12px; min-width:20px; height:20px; padding:0 6px; border-radius:99px; display:inline-grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:800; background:var(--a-coral); color:#fff; box-shadow:0 0 0 0 color-mix(in oklab,var(--a-coral) 55%,transparent); animation:ocAlertPulse 1.8s ease-out infinite; }
/* 冠名场景下高亮金/紫 */
.oc-subtabs[data-side="crown"] .oc-subtab.on{ color:#3a2600; background:linear-gradient(135deg,var(--a-amber),#c8912f); }
.oc-subtabs[data-side="crown"] .oc-subtab.on .pill{ background:rgba(0,0,0,.22); color:#3a2600; }

/* 招募卡内"愿偿还时长" pill + 选TA 按钮 */
.oc-willing{ display:inline-flex; align-items:center; gap:5px; font-family:var(--hud); font-weight:700;
  font-size:11.5px; padding:5px 11px; border-radius:999px;
  background:color-mix(in oklab,var(--a-amber) 16%,transparent); color:var(--a-amber); }
.oc-willing b{ font-family:var(--display); font-style:italic; font-size:14px; }
.oc-pick-crown{ margin-left:auto; font-family:var(--hud); font-weight:800; font-size:12px; padding:7px 15px;
  border-radius:10px; border:0; cursor:pointer; color:#231600;
  background:linear-gradient(135deg,#ffe08a,var(--a-amber)); box-shadow:0 8px 20px -12px var(--a-amber); }
.oc-pick-crown:hover{ transform:translateY(-1px); }

/* 申报时间线(逐笔申报节点轴 · 复用 .dpcr-rp 行) */
.oc-tl{ position:relative; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.oc-tl::before{ content:""; position:absolute; left:5px; top:14px; bottom:14px; width:2px; background:var(--line-soft); }
.oc-tl .dpcr-rp{ position:relative; }
.oc-tl .dpcr-rp::before{ content:""; position:absolute; left:-20px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:var(--a-amber); border:2px solid var(--bg);
  box-shadow:0 0 0 2px color-mix(in oklab,var(--a-amber) 45%,transparent); z-index:1; }
.oc-tl .dpcr-rp.done::before{ background:var(--ok); box-shadow:0 0 0 2px color-mix(in oklab,var(--ok) 45%,transparent); }
.oc-rpt{ font-family:var(--mono); font-size:11px; color:var(--text-mute); }
.dpcr-rp b{ color:var(--a-amber); font-weight:800; font-family:var(--display); font-style:italic; font-size:16px; }
.dpcr-rp .ts{ margin-left:auto; font-family:var(--hud); font-weight:700; font-size:12px; }
.dpcr-rp .ts.ok{ color:var(--ok); } .dpcr-rp .ts.pend{ color:var(--a-amber); } .dpcr-rp .ts.no{ color:var(--a-coral); }

/* 进度条端点节点(覆盖既有 .cc-track/.cc-fill,加端点 mark) */
.crown-card .cc-track{ overflow:visible; }
.crown-card .cc-fill{ position:relative; }
.crown-card .cc-fill::after{ content:""; position:absolute; right:0; top:50%; transform:translate(50%,-50%);
  width:14px; height:14px; border-radius:50%; background:var(--bg); border:3px solid var(--side);
  box-shadow:0 0 8px -1px var(--side); }
.crown-card .cc-fill.done::after{ border-color:var(--ok); box-shadow:0 0 8px -1px var(--ok); }

/* ============================================================
   7) 有奖(独立顶部业务 tab)— 卡片复用 .ocard2 容器
   tab 本体沿用 .dpcr-tabs / 站点既有一级 tab 类;此处给 raffle 卡补样式。
   ============================================================ */
.oc-raffle-prize{ display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap;
  font-family:var(--cn); font-size:14.5px; color:var(--text-dim); }
/* 奖品名是卡片主角:加大加粗(2026-07-16 用户:送的啥礼物都看不清) */
.oc-raffle-prize b{ color:var(--text); font-size:18px; font-weight:800; }
.oc-raffle-prize .cnt{ font-family:var(--display); font-style:italic; font-weight:800; color:var(--a-amber); }
.oc-raffle-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:12px;
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; }
.oc-rm-cell{ background:var(--surface-2); padding:10px 6px; text-align:center; }
.oc-rm-k{ font-family:var(--cn); font-size:12px; color:var(--text-mute); white-space:nowrap; }
.oc-rm-v{ font-family:var(--hud); font-weight:800; font-size:15px; color:var(--text); margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:520px){ .oc-raffle-meta{ grid-template-columns:repeat(2,1fr); } }
/* 热闹参与区(常驻,直接看到谁参与说了啥) */
.oc-hot{ margin-top:11px; padding:11px 13px 12px; border-radius:14px;
  background:color-mix(in oklab,var(--a-cyan) 6%,transparent); border:1px solid color-mix(in oklab,var(--a-cyan) 20%,transparent); }
.oc-hot-empty{ margin-top:11px; padding:13px 14px; border-radius:14px; text-align:center;
  font-family:var(--cn); font-size:14px; color:var(--text-mute); background:var(--surface-2); border:1px dashed var(--line); }
.oc-hot-top{ display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.oc-hot-avs{ display:flex; align-items:center; }
.oc-hotav{ display:inline-flex; border:2px solid var(--bg-2,#171426); border-radius:50%; }
.oc-hotav img,.oc-hotav .av,.oc-hotav>*{ width:28px; height:28px; border-radius:50%; }
.oc-hotmoreav{ display:inline-grid; place-items:center; min-width:28px; height:28px; margin-left:-9px; padding:0 5px;
  border-radius:14px; background:var(--surface-2); border:2px solid var(--bg-2,#171426);
  font-family:var(--hud); font-weight:800; font-size:11px; color:var(--text-dim); }
.oc-hot-n{ font-family:var(--cn); font-size:13.5px; color:var(--a-cyan); font-weight:700; }
.oc-hot-n b{ font-family:var(--display); font-style:italic; font-size:16px; }
.oc-hot-list{ display:flex; flex-direction:column; gap:5px; }
.oc-hotrow{ display:flex; align-items:center; gap:9px; padding:2px 0; }
.oc-hotrow img,.oc-hotrow .av,.oc-hotrow>*:first-child{ width:27px; height:27px; border-radius:50%; flex:none; }
.oc-hotmsg{ min-width:0; flex:1; font-family:var(--cn); font-size:14.5px; line-height:1.45; }
.oc-hotmsg b{ color:var(--text); font-weight:700; margin-right:6px; }
.oc-hotmsg span{ color:var(--text-dim); word-break:break-word; }
.oc-hotmsg span.q{ color:var(--text-mute); }
.oc-hotmore{ margin-top:8px; background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--cn); font-weight:700; font-size:13px; color:var(--a-cyan); }
.oc-hotmore:hover{ text-decoration:underline; }
.oc-hotreply{ flex:none; margin-left:auto; align-self:flex-start; background:none; border:none; cursor:pointer;
  color:var(--a-cyan); font-size:15px; font-weight:700; line-height:1; padding:3px 7px; border-radius:9px; opacity:.75; transition:.12s; }
.oc-hotreply:hover{ background:color-mix(in oklab,var(--a-cyan) 15%,transparent); opacity:1; }
/* 有奖回复/评论输入框(参与/发起人回复/改留言 共用):圆润、聚焦高亮 */
.oc-raffinput{ display:flex; gap:8px; align-items:center; margin-top:10px; padding:6px 6px 6px 15px; border-radius:14px;
  background:var(--surface-2); border:1.5px solid var(--line); transition:border-color .15s, box-shadow .15s; }
.oc-raffinput:focus-within{ border-color:var(--v-signature); box-shadow:0 0 0 4px color-mix(in oklab,var(--v-signature) 14%,transparent); }
.oc-raffinput input{ flex:1; min-width:0; border:none; outline:none; background:transparent; height:38px;
  font-family:var(--cn); font-size:14.5px; color:var(--text); padding:0; }
.oc-raffinput input::placeholder{ color:var(--text-mute); }
.oc-raffinput .btn{ flex:0 0 auto; }
.oc-raffinput{ position:relative; }
/* 表情选择器(Discord 风格,自带一套 emoji,无外链) */
.oc-emobtn{ flex:none; background:none; border:none; cursor:pointer; font-size:19px; line-height:1;
  padding:5px 6px; border-radius:10px; opacity:.72; transition:.12s; }
.oc-emobtn:hover{ opacity:1; background:color-mix(in oklab,var(--a-amber) 16%,transparent); transform:scale(1.14); }
.oc-emopanel{ position:absolute; right:8px; bottom:calc(100% + 9px); z-index:60; width:min(304px,86vw); padding:9px;
  border-radius:15px; background:var(--surface-2); border:1px solid var(--line);
  box-shadow:0 20px 48px -14px rgba(0,0,0,.55); display:grid; grid-template-columns:repeat(8,1fr); gap:2px; }
.oc-emopanel button{ background:none; border:none; cursor:pointer; font-size:20px; line-height:1;
  padding:5px 0; border-radius:9px; transition:transform .1s, background .1s; }
.oc-emopanel button:hover{ background:color-mix(in oklab,var(--a-cyan) 18%,transparent); transform:scale(1.2); }
/* Discord 风格聊天(分组:同一人连续消息只显示一次头像/昵称) */
.oc-chat{ display:flex; flex-direction:column; gap:1px; }
.oc-chat-empty{ font-family:var(--cn); font-size:13px; color:var(--text-mute); padding:12px 2px; text-align:center; }
.oc-cmsg{ display:flex; gap:11px; padding:4px 6px 4px 4px; border-radius:10px; transition:background .1s; }
.oc-cmsg:hover{ background:color-mix(in oklab,var(--a-cyan) 4%,transparent); }
.oc-cav{ flex:none; margin-top:3px; }
.oc-cav img,.oc-cav .av,.oc-cav>*{ width:38px; height:38px; border-radius:50%; }
.oc-cbody{ min-width:0; flex:1; }
.oc-chead{ display:flex; align-items:baseline; gap:7px; line-height:1.2; margin-bottom:2px; }
.oc-cname{ font-family:var(--cn); font-weight:800; font-size:14.5px; color:var(--text); }
.oc-chost{ font-size:10.5px; font-weight:800; color:#1c1300; padding:1px 8px; border-radius:20px;
  background:linear-gradient(135deg,var(--a-amber),#ffce5a); }
.oc-ctime{ font-family:var(--mono); font-size:10.5px; color:var(--text-mute); }
.oc-cref{ display:flex; align-items:center; gap:5px; font-family:var(--cn); font-size:12px; color:var(--text-mute);
  margin:1px 0 2px; padding-left:16px; position:relative; min-width:0; }
.oc-cref::before{ content:''; position:absolute; left:3px; top:52%; width:9px; height:9px;
  border-left:2px solid var(--line); border-top:2px solid var(--line); border-top-left-radius:7px; }
.oc-cref b{ color:var(--a-cyan); font-weight:700; flex:none; }
.oc-crefq{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }
.oc-cline{ position:relative; display:flex; align-items:flex-start; gap:8px; padding:1px 6px 1px 4px;
  border-radius:8px; margin:0 -4px; }
.oc-cline:hover{ background:color-mix(in oklab,var(--a-cyan) 7%,transparent); }
.oc-ctext{ min-width:0; flex:1; font-family:var(--cn); font-size:14.5px; line-height:1.5; color:var(--text-dim);
  word-break:break-word; white-space:pre-wrap; }
.oc-cquiet{ min-width:0; flex:1; font-family:var(--cn); font-size:13px; color:var(--text-mute); font-style:italic; }
.oc-creply{ flex:none; opacity:0; background:var(--surface-2); border:1px solid var(--line); cursor:pointer;
  color:var(--a-cyan); font-family:var(--cn); font-size:12px; font-weight:600; line-height:1; padding:4px 9px;
  border-radius:8px; transition:.12s; }
.oc-cline:hover .oc-creply{ opacity:.9; }
.oc-creply:hover{ opacity:1; background:color-mix(in oklab,var(--a-cyan) 16%,transparent); }
@media(hover:none){ .oc-creply{ opacity:.7; } }
/* 聊天媒体:图片消息 + 全屏灯箱 */
.oc-cmedia{ min-width:0; flex:1; }
.oc-cimg{ display:block; max-width:220px; max-height:220px; width:auto; height:auto; border-radius:12px;
  border:1px solid var(--line); cursor:zoom-in; object-fit:cover; background:var(--surface-2); }
.oc-cimg:hover{ border-color:color-mix(in oklab,var(--a-cyan) 40%,var(--line)); }
/* VIP 徽章 + 升级进度(身份卡内,每个大段更 fancy) */
.oc-vipwrap{ margin-top:9px; max-width:260px; }
.oc-vip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--hud,system-ui); font-weight:800; font-size:12px;
  padding:3px 12px; border-radius:999px; color:#fff; letter-spacing:.3px; white-space:nowrap; }
.oc-vip-inact{ background:rgba(255,255,255,.18); color:rgba(255,255,255,.9); }
.oc-vip-vip{ background:linear-gradient(135deg,var(--vc),color-mix(in oklab,var(--vc) 55%,#fff)); box-shadow:0 4px 14px -6px var(--vc); }
.oc-vip-svip{ background:linear-gradient(135deg,#a855f7,#ec4899); box-shadow:0 5px 18px -6px rgba(192,38,211,.85); }
.oc-vip-ssvip{ background:linear-gradient(120deg,#ffd93b,#ff6ec4,#7873f5,#ffd93b); background-size:300% 100%;
  animation:oc-vipshine 3s linear infinite; box-shadow:0 6px 22px -6px rgba(255,110,196,.75); text-shadow:0 1px 2px rgba(0,0,0,.25); }
@keyframes oc-vipshine{ to{ background-position:300% 0; } }
.oc-vipbar{ margin-top:7px; height:5px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; max-width:230px; }
.oc-vipbar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#fff,rgba(255,255,255,.7)); transition:width .4s; }
.oc-vipnote{ margin-top:5px; font-family:var(--cn); font-size:11px; color:rgba(255,255,255,.82); }
.oc-vipnote b{ color:#fff; font-weight:800; }
.oc-iconbtn{ color:var(--text-dim); display:inline-flex; align-items:center; justify-content:center; }
.oc-iconbtn svg{ display:block; }
.oc-iconbtn:hover{ color:var(--a-cyan); }
.oc-cvideo{ display:block; max-width:240px; max-height:240px; border-radius:12px; border:1px solid var(--line); background:#000; margin-top:2px; }
/* 好看的语音条 */
.oc-voice{ display:inline-flex; align-items:center; gap:9px; padding:6px 13px 6px 7px; border-radius:22px; margin-top:2px;
  background:color-mix(in oklab,var(--a-cyan) 12%,transparent); border:1px solid color-mix(in oklab,var(--a-cyan) 26%,transparent);
  cursor:pointer; user-select:none; max-width:230px; transition:background .12s; }
.oc-voice:hover{ background:color-mix(in oklab,var(--a-cyan) 18%,transparent); }
.oc-voice .vp{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--a-cyan); color:#fff; }
.oc-voice .vp svg{ width:14px; height:14px; margin-left:1px; }
.oc-voice .vwave{ display:inline-flex; align-items:center; gap:2.5px; height:22px; }
.oc-voice .vwave i{ width:2.5px; border-radius:2px; background:var(--a-cyan); height:7px; opacity:.55; transform-origin:center; }
.oc-voice .vwave i:nth-child(odd){ height:13px; }
.oc-voice .vwave i:nth-child(3n){ height:18px; opacity:.75; }
.oc-voice.playing .vp{ background:var(--a-coral,#ff6b6b); }
.oc-voice.playing .vwave i{ animation:oc-wave .82s ease-in-out infinite; }
.oc-voice.playing .vwave i:nth-child(2n){ animation-delay:.12s; }
.oc-voice.playing .vwave i:nth-child(3n){ animation-delay:.26s; }
@keyframes oc-wave{ 0%,100%{ transform:scaleY(.45); } 50%{ transform:scaleY(1.35); } }
.oc-voice .vdur{ font-family:var(--mono); font-size:11.5px; color:var(--a-cyan); font-weight:800; }
/* 底部悬浮录音条 */
.oc-recbar{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:9998; display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:14px; background:var(--surface-2,#1e1b2e); border:1px solid var(--line);
  box-shadow:0 20px 54px -16px rgba(0,0,0,.6); font-family:var(--cn); }
.oc-recbar .dot{ width:11px; height:11px; border-radius:50%; background:var(--a-coral,#ff6b6b); animation:oc-recpulse 1s infinite; }
@keyframes oc-recpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.oc-recbar .rlabel{ font-size:13px; font-weight:700; color:var(--text); }
.oc-recbar .rt{ font-family:var(--mono); font-size:13px; color:var(--text-dim); min-width:34px; }
.oc-recbar button{ border:none; cursor:pointer; font-family:var(--cn); font-weight:700; font-size:12.5px; padding:7px 14px; border-radius:10px; }
.oc-recbar .oc-recx{ background:var(--surface,#171426); color:var(--text-mute); border:1px solid var(--line); }
.oc-recbar .oc-recok{ background:linear-gradient(135deg,var(--a-coral,#ff6b6b),#ff9e7a); color:#fff; }
.oc-lightbox{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:rgba(0,0,0,.86); cursor:zoom-out; padding:24px; }
.oc-lightbox img{ max-width:96vw; max-height:92vh; border-radius:12px; box-shadow:0 24px 70px -20px rgba(0,0,0,.8); }
/* 开奖结果横幅(所有人可见:谁把奖品抱走了) */
.oc-raffwin{ margin-top:11px; padding:12px 15px; border-radius:14px; font-family:var(--cn);
  background:linear-gradient(135deg,color-mix(in oklab,var(--a-amber) 17%,transparent),color-mix(in oklab,var(--a-pink) 12%,transparent));
  border:1px solid color-mix(in oklab,var(--a-amber) 34%,transparent); }
.oc-raffwin .wt{ font-weight:800; font-size:12.5px; color:var(--a-amber); letter-spacing:.4px; }
.oc-raffwin .wb{ font-size:14px; color:var(--text); margin-top:4px; line-height:1.55; word-break:break-word; }
.oc-raffwin .wb b{ color:var(--text); font-weight:800; }
.oc-raffwin .wb b.wn{ color:var(--a-pink); }
.oc-raffwin.me{ border-color:var(--ok);
  background:linear-gradient(135deg,color-mix(in oklab,var(--ok) 18%,transparent),color-mix(in oklab,var(--a-amber) 12%,transparent)); }
.oc-raffwin .wme{ margin-top:5px; font-weight:800; font-size:13.5px; color:var(--ok); }
/* 追加送礼记录(挂在有奖卡上) */
.oc-raffbonus{ margin-top:10px; padding:10px 13px; border-radius:13px; font-family:var(--cn);
  background:color-mix(in oklab,var(--a-pink) 6%,transparent); border:1px solid color-mix(in oklab,var(--a-pink) 20%,transparent); }
.oc-raffbonus .bh{ font-weight:800; font-size:12px; color:var(--a-pink); margin-bottom:5px; letter-spacing:.3px; }
.oc-raffbonus .br{ font-size:13px; color:var(--text-dim); line-height:1.7; word-break:break-word; }
.oc-raffbonus .br b{ color:var(--text); font-weight:700; }
.oc-raffbonus .br .bf{ color:var(--a-cyan); font-weight:700; }
.oc-raffbonus .br .ar{ color:var(--text-mute); margin:0 2px; }
.oc-raffbonus .br .bd{ font-family:var(--mono); font-size:11.5px; color:var(--a-amber); font-weight:700; }
.oc-raffbonus .br .bt2{ font-family:var(--mono); font-size:10.5px; color:var(--text-mute); }
/* 资金流水行 */
.oc-wlrow{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:13px;
  background:var(--surface-2); border:1px solid var(--line-soft); margin-bottom:8px; }
.oc-wlrow .wl-l{ min-width:0; flex:1; }
.oc-wlrow .wl-desc{ font-family:var(--cn); font-weight:700; font-size:14px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-wlrow .wl-cat{ display:inline-block; flex:none; font-family:var(--cn); font-weight:800; font-size:11px;
  padding:2px 8px; border-radius:7px; margin-right:8px; vertical-align:1px;
  color:var(--wc,#888); background:color-mix(in oklab,var(--wc,#888) 15%,transparent);
  border:1px solid color-mix(in oklab,var(--wc,#888) 30%,transparent); }
.oc-wlrow .wl-sub{ font-family:var(--mono); font-size:11px; color:var(--text-mute); margin-top:3px; }
.oc-wlrow .wl-r{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.oc-wlrow .wl-amt{ font-family:var(--hud); font-weight:800; font-size:14px; color:var(--text-mute); white-space:nowrap; }
.oc-wlrow .wl-amt.pos{ color:var(--ok); }
.oc-wlrow .wl-amt.neg{ color:var(--a-coral,#ff6b6b); }
.oc-raffle-draw{ margin-left:auto; font-family:var(--hud); font-weight:800; font-size:12.5px; padding:8px 15px;
  border-radius:10px; border:0; cursor:pointer; color:#1c1300;
  background:linear-gradient(135deg,var(--a-amber),#ffce5a); box-shadow:0 8px 20px -12px var(--a-amber); }

/* ============================================================
   8) 计费规则 / 派单实时预览等弹窗内补充
   弹窗本体沿用 .center-modal / .cm-card / .cm-head;以下为规则行 + 预览卡。
   ============================================================ */
.oc-rule-row{ display:flex; gap:12px; padding:14px 16px; border-radius:13px; margin-bottom:11px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  font-family:var(--cn); font-size:13.5px; line-height:1.7; color:var(--text-dim); }
.oc-rule-row .rn{ width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--display); font-style:italic; font-weight:800; font-size:13px; color:#0c2a1c;
  background:linear-gradient(135deg,var(--a-mint),var(--ok)); margin-top:1px; }
.oc-rule-row b{ color:var(--text); font-weight:700; }
.oc-rule-row .hi{ color:var(--a-mint); font-weight:700; }
/* 冠名报价上限对照表:档位名要完整可读(不能塞进小圆点里) */
.oc-cap-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px;
  border-radius:12px; margin-bottom:8px; background:rgba(255,255,255,.04); border:1px solid var(--line-soft); }
.oc-cap-tier{ display:flex; align-items:center; gap:7px; font-family:var(--cn); font-weight:700; font-size:14px; color:var(--text); white-space:nowrap; }
.oc-cap-tier small{ font-family:var(--mono); font-weight:400; font-size:10.5px; color:var(--text-mute); }
.oc-cap-val{ font-family:var(--cn); font-size:13px; color:var(--text-dim); white-space:nowrap; }
.oc-cap-val b{ color:var(--text); font-weight:700; }
.oc-cap-val .hi{ color:var(--a-mint); font-weight:800; }

.oc-prev{ margin-top:14px; padding:13px 16px; border-radius:13px;
  background:color-mix(in oklab,var(--v-signature) 9%,var(--surface));
  border:1px solid color-mix(in oklab,var(--v-signature) 24%,var(--line)); }
.oc-prev .pvl{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--v-bright); margin-bottom:9px; }
.oc-prev-card{ border:1.5px solid var(--line); border-radius:13px; background:var(--surface); padding:13px 15px; display:flex; flex-direction:column; gap:10px; }

/* ============================================================
   9) 响应式
   ============================================================ */
@media(max-width:760px){
  .oc-clock{ font-size:26px; }
  .oc-est{ margin-left:0; width:100%; }
  .oc-meter{ gap:10px; }
  .oc-flow-steps{ gap:5px; }
}

/* ============================================================
   10) 富版弹窗内组件(报价/出账/改价/申报/改报)
   弹窗外壳沿用 .center-modal / .cm-card / .cm-head。
   ============================================================ */
.oc-readybar{ display:flex; gap:11px; align-items:flex-start; padding:13px 15px; border-radius:13px; margin-bottom:16px;
  background:color-mix(in oklab,var(--ok) 10%,var(--surface)); border:1px solid color-mix(in oklab,var(--ok) 26%,var(--line)); }
.oc-readybar .ic{ font-size:20px; flex:none; line-height:1.3; }
.oc-readybar b{ font-family:var(--cn); font-weight:700; font-size:13.5px; color:var(--text); }
.oc-readybar .sub{ font-family:var(--cn); font-size:12px; color:var(--text-dim); margin-top:3px; }
.oc-flabel{ font-family:var(--cn); font-weight:700; font-size:13px; color:var(--text-dim); margin:0 0 9px; display:flex; align-items:center; gap:7px; }
.oc-segrow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.oc-segbtn{ text-align:left; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; transition:.15s; }
.oc-segbtn b{ font-family:var(--cn); font-weight:800; font-size:14px; color:var(--text); display:block; }
.oc-segbtn small{ font-family:var(--mono); font-size:10px; color:var(--text-mute); }
.oc-segbtn.on{ border-color:var(--v-signature); background:color-mix(in oklab,var(--v-signature) 12%,var(--surface)); box-shadow:inset 0 0 0 1px var(--v-signature); }
/* 选定开局 · 语音房三选卡 */
.oc-vcards{ display:flex; flex-direction:column; gap:9px; margin-bottom:2px; }
.oc-vccard{ display:flex; align-items:center; gap:12px; text-align:left; width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; transition:.15s; }
.oc-vccard:hover{ border-color:color-mix(in oklab,var(--v-signature) 40%,var(--line)); }
.oc-vccard .vci{ font-size:19px; flex:none; line-height:1; }
.oc-vccard .vct{ flex:1; min-width:0; }
.oc-vccard .vct b{ font-family:var(--cn); font-weight:800; font-size:13.5px; color:var(--text); display:block; }
.oc-vccard .vct small{ font-family:var(--mono); font-size:10px; color:var(--text-mute); display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-vccard .vck{ flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:transparent; }
.oc-vccard .vck svg{ width:12px; height:12px; }
.oc-vccard.on{ border-color:var(--v-signature); background:color-mix(in oklab,var(--v-signature) 12%,var(--surface)); box-shadow:inset 0 0 0 1px var(--v-signature); }
.oc-vccard.on .vck{ border-color:var(--v-signature); background:var(--v-signature); color:#fff; }
.oc-srow{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.oc-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:13px; overflow:hidden; }
.oc-stepper button{ width:44px; height:48px; border:0; background:var(--surface); color:var(--text); font-size:22px; cursor:pointer; transition:.15s; }
.oc-stepper button:hover{ background:var(--surface-2); color:var(--v-bright); }
.oc-stepin{ width:84px; height:48px; border:0; background:transparent; text-align:center; font-family:var(--display); font-style:italic; font-weight:800; font-size:22px; color:var(--text); outline:none; -moz-appearance:textfield; }
.oc-stepin::-webkit-outer-spin-button,.oc-stepin::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.oc-stepu{ font-family:var(--cn); font-size:13px; color:var(--text-mute); padding:0 12px 0 2px; }
.oc-presets{ display:flex; gap:7px; flex-wrap:wrap; }
.oc-preset{ font-family:var(--hud); font-weight:700; font-size:12px; padding:8px 13px; border-radius:9px; border:1.5px solid var(--line); background:var(--surface); color:var(--text-dim); cursor:pointer; }
.oc-preset.on{ border-color:var(--v-bright); color:var(--v-bright); background:color-mix(in oklab,var(--v-bright) 12%,transparent); }
.oc-starthint{ font-family:var(--cn); font-size:11.5px; line-height:1.6; color:var(--text-mute); margin-top:12px; }
.oc-fta{ width:100%; font-family:var(--cn); font-size:13.5px; padding:11px 13px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); outline:none; resize:vertical; min-height:60px; }
.oc-fta:focus{ border-color:var(--v-signature); }
.oc-mfoot{ display:flex; gap:11px; margin-top:18px; }
.oc-billsum{ border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; margin-bottom:16px; }
.oc-billsum .r{ display:flex; align-items:center; justify-content:space-between; padding:11px 15px; font-family:var(--cn); font-size:13px; color:var(--text-dim); }
.oc-billsum .r + .r{ border-top:1px solid var(--line-soft); }
.oc-billsum .r b{ font-family:var(--mono); color:var(--text); }
.oc-billsum .r.total{ background:color-mix(in oklab,var(--a-mint) 9%,transparent); }
.oc-billsum .r.total b{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--a-mint); }
.oc-mctx{ display:flex; gap:11px; align-items:center; padding:13px 15px; border-radius:13px; background:color-mix(in oklab,#ffc53d 9%,var(--surface)); border:1px solid color-mix(in oklab,#ffc53d 24%,var(--line)); }
.oc-mctx .ci{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; font-size:19px; background:linear-gradient(135deg,#ffe08a,#ffc53d); }
.oc-mctx .ct{ font-family:var(--cn); font-weight:700; font-size:13.5px; color:var(--text); }
.oc-mctx .cs{ font-family:var(--mono); font-size:11px; color:var(--text-mute); margin-top:3px; }
.oc-recap{ display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border-radius:12px; margin-top:14px; background:rgba(255,255,255,.04); border:1px solid var(--line-soft); }
.oc-recap span{ font-family:var(--cn); font-size:12.5px; color:var(--text-dim); }
.oc-recap b{ font-family:var(--display); font-style:italic; font-weight:800; font-size:18px; color:var(--a-amber); }

/* ============================================================
   11) 老板·招募中卡 + 申请人行(对齐设计稿:淡边+青色左accent,
       申请人 .grab2 字号/标签/时间/一行按钮)
   ============================================================ */
.ocard2.oc-recruit{ position:relative; border-color:var(--line-soft); }
.ocard2.oc-recruit::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--a-cyan),var(--v-deep)); }
.cc-feed-head{ display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.cc-feed-head .cnt{ display:inline-flex; align-items:center; gap:6px; font-family:var(--hud); font-weight:700; font-size:11.5px; color:var(--ok); }
.cc-feed-head .cnt .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); animation:oc-pulse 1.5s infinite; }
.cc-wall{ display:flex; flex-direction:column; gap:10px; }
.grab2{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border-radius:14px; border:1.5px solid var(--line-soft); background:rgba(255,255,255,.025); cursor:pointer; transition:.15s; }
.grab2:hover{ border-color:color-mix(in oklab,var(--a-coral) 35%,var(--line)); }
.grab2.on{ border-color:color-mix(in oklab,var(--a-coral) 55%,var(--line)); background:color-mix(in oklab,var(--a-coral) 8%,transparent); }
.grab2 .ck{ width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line); display:grid; place-items:center; flex:none; margin-top:2px; transition:.15s; }
.grab2 .ck svg{ width:13px; height:13px; opacity:0; }
.grab2.on .ck{ background:var(--a-coral); border-color:var(--a-coral); } .grab2.on .ck svg{ opacity:1; }
.grab2 .av{ width:34px; height:34px; border-radius:50%; flex:none; margin-top:0; }
.grab2 .ck{ margin-top:3px; }
.grab2 .body{ padding-top:1px; }
.grab2 .body{ flex:1; min-width:0; }
.grab2 .row1{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.grab2 .nm{ font-family:var(--cn); font-weight:800; font-size:15px; color:var(--text); }
.grab2 .ok{ font-family:var(--cn); font-size:11.5px; color:var(--ok); font-weight:600; }
.grab2 .gtag{ font-family:var(--cn); font-weight:600; font-size:10.5px; padding:3px 8px; border-radius:6px; }
.grab2 .time{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--text-mute); }
.grab2 .msg{ margin-top:8px; padding:10px 13px; border-radius:4px 12px 12px 12px; background:rgba(255,255,255,.05); border:1px solid var(--line-soft); font-family:var(--cn); font-size:13px; line-height:1.5; color:var(--text); }
.grab2 .row2{ display:flex; align-items:center; gap:9px; margin-top:8px; flex-wrap:wrap; }   /* 手机:chip 整颗换行,不挤压变形 */
.grab2 .rate{ font-family:var(--mono); font-size:11px; color:var(--a-amber); }
.grab2 .rate small{ color:var(--text-mute); }
/* 底部一行:试音 / 选定开局(N) / 流单 —— 不换行,三个并排 */
.cc-feed-actions{ display:flex; flex-wrap:nowrap; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); }
.cc-feed-actions > *{ flex:1 1 0; min-width:0; white-space:nowrap; justify-content:center; }
.cc-feed-actions .pickbtn{ flex:1.4 1 0; font-family:var(--hud); font-weight:800; font-size:13px; padding:10px 0; border-radius:11px; border:0; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--a-coral),oklch(0.62 0.18 18)); box-shadow:0 8px 20px -12px var(--a-coral); }
.cc-feed-actions .pickbtn:hover{ transform:translateY(-1px); }

/* 待确认订单卡(老板)· 紧凑结算行 + 右对齐小按钮 */
.oc-settle{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:11px 13px; border-radius:11px;
  background:color-mix(in oklab,var(--busy) 8%,var(--surface)); border:1px solid color-mix(in oklab,var(--busy) 22%,var(--line)); }
.oc-settle .si{ font-size:15px; flex:none; line-height:1.4; }
.oc-settle .st{ font-family:var(--cn); font-size:12.5px; line-height:1.55; color:var(--text-dim); }
.oc-settle .st b{ font-family:var(--display); font-style:italic; font-weight:800; font-size:16px; color:var(--a-amber); margin:0 1px; }
.oc-settle .sm{ font-family:var(--mono); font-size:10.5px; color:var(--text-mute); }
.oc-settle-foot{ display:flex; justify-content:flex-end; gap:9px; padding:12px 16px; border-top:1px solid var(--line-soft); }

/* 展开看报名/申请人(.gb / .ocard2 / .crown-card 内 data-apps 切换 .show-apps) */
.gb-ppl{ background:transparent; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-family:var(--cn); font-size:12.5px; color:var(--text-dim); padding:0; }
.gb-ppl .stack{ display:inline-flex; } .gb-ppl b{ color:var(--text); }
.gb-ppl .chev{ color:var(--text-mute); transition:.2s; }
.show-apps .gb-ppl .chev{ transform:rotate(180deg); }
.oc-apps{ display:none; flex-direction:column; gap:8px; margin-top:11px; padding-top:11px; border-top:1px dashed var(--line-soft); }
.show-apps .oc-apps{ display:flex; }
.gb-ap{ display:flex; align-items:center; gap:10px; }
.gb-ap .av{ border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-family:var(--display); font-style:italic; font-weight:800; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18); }
.gb-ap .nm{ font-family:var(--cn); font-weight:700; font-size:12.5px; color:var(--text); }
.gb-ap .mm{ font-family:var(--mono); font-size:10px; color:var(--text-mute); }
.gb-ap .up{ font-family:var(--hud); font-weight:700; font-size:9.5px; padding:2px 7px; border-radius:999px; background:color-mix(in oklab,var(--a-coral) 18%,transparent); color:var(--a-coral); }
.gb-ap .rate{ font-family:var(--hud); font-weight:700; font-size:10.5px; color:var(--a-amber); }
.gb-ap .wh{ margin-left:auto; font-family:var(--hud); font-weight:700; font-size:10.5px; padding:3px 9px; border-radius:999px; background:color-mix(in oklab,var(--a-amber) 16%,transparent); color:var(--a-amber); }
.gb-ap .wh b{ font-family:var(--display); font-style:italic; font-size:13px; }
/* 冠名卡「申请冠名·报偿还时长」金色按钮:原 .gb-1 无 CSS + SVG 无尺寸 → 撑成巨块。这里补全宽金色按钮 + 锁死图标尺寸 */
.gb-1{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 18px; border:none; border-radius:12px; font-family:var(--hud); font-weight:800; font-size:14px; letter-spacing:.02em; cursor:pointer; transition:.15s; }
.gb-1 svg{ width:17px !important; height:17px !important; flex:none; }
.gb-1:hover{ filter:brightness(1.05); transform:translateY(-1px); }
/* 好感等级(偿还中冠名卡) */
.oc-affinity{ display:inline-flex; align-items:center; gap:4px; margin-left:8px; font-family:var(--hud); font-weight:700; font-size:10px; padding:3px 9px; border-radius:999px; background:color-mix(in oklab,var(--a-pink) 16%,transparent); color:var(--a-pink); }

/* ---- 报名声明计费(可接的单卡片):分段按钮 + 钻石单价胶囊 ---- */
.gb-bill{ display:flex; gap:8px; flex-wrap:wrap; align-items:stretch; }
.gb-seg{ display:inline-flex; padding:3px; gap:3px; border:1.5px solid var(--line); border-radius:12px; background:color-mix(in oklab,var(--surface) 70%,transparent); }
.gb-seg button{ appearance:none; border:none; cursor:pointer; padding:7px 13px; border-radius:9px; background:transparent; color:var(--text-dim); font-family:var(--cn); font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:5px; transition:background .15s,color .15s,box-shadow .15s; }
.gb-seg button:hover{ color:var(--text); }
.gb-seg button.on{ background:color-mix(in oklab,var(--v-bright) 16%,var(--surface)); color:var(--v-bright); box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--v-bright) 50%,transparent); }
.gb-pricewrap{ display:inline-flex; align-items:center; gap:7px; padding:0 13px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface); cursor:text; }
.gb-pricewrap:focus-within{ border-color:var(--v-bright); box-shadow:0 0 0 3px color-mix(in oklab,var(--v-bright) 14%,transparent); }
.gb-pricewrap .gem{ font-size:13px; }
.gb-pricewrap input{ width:86px; border:none; background:transparent; color:var(--text); font-family:var(--display,var(--hud)); font-size:14.5px; font-weight:700; outline:none; }
.gb-pricewrap input::-webkit-outer-spin-button,.gb-pricewrap input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.gb-pricewrap input[type=number]{ -moz-appearance:textfield; }
.gb-pricewrap .unit{ font-family:var(--cn); font-size:11.5px; color:var(--text-mute); white-space:nowrap; }

/* 报价徽章(老板报名墙 + 陪玩「你的报名」行):琥珀金,和加价区分 */
.gb-quote{ display:inline-flex; align-items:baseline; gap:2px; padding:3px 10px; border-radius:999px; flex:none;
  background:linear-gradient(135deg,color-mix(in oklab,var(--a-amber) 22%,transparent),color-mix(in oklab,var(--a-amber) 10%,transparent));
  border:1px solid color-mix(in oklab,var(--a-amber) 45%,transparent); color:var(--a-amber);
  font-family:var(--display,var(--hud)); font-weight:800; font-size:12.5px; letter-spacing:.2px; }
.gb-quote small{ font-family:var(--cn); font-weight:600; font-size:10px; opacity:.85; }
.gb-edited{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; flex:none;
  background:color-mix(in oklab,var(--text-mute) 14%,transparent); border:1px solid color-mix(in oklab,var(--text-mute) 30%,transparent);
  color:var(--text-dim); font-family:var(--cn); font-size:10px; font-weight:700; }
.card-edit{ margin-left:auto; flex:none; cursor:pointer; font-family:var(--cn); font-size:11.5px; font-weight:700; color:var(--v-bright); opacity:.85; }
.card-edit:hover{ opacity:1; text-decoration:underline; }
/* 报名墙行:tag 多时允许换行,不再挤压重叠 */
.gb-ap .row1{ flex-wrap:wrap; row-gap:3px; }
.gb-ap .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* tag 一律单行不折行;超出收进 +N 展开 */
.gtag{ white-space:nowrap; }
.gtag-more{ cursor:pointer; background:color-mix(in oklab,var(--v-bright) 16%,transparent)!important; color:var(--v-bright)!important; font-weight:800; }
.gtag-more:hover{ background:color-mix(in oklab,var(--v-bright) 26%,transparent)!important; }
.gtag-rest{ display:contents; }
.gb-ap .mm{ white-space:nowrap; }

/* 报名墙行:名字/「报名✓」不折行不竖排;tag 放不下换成第二排 */
.grab2 .row1{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; row-gap:4px; min-width:0; }
.grab2 .nm,.grab2 .ok,.grab2 .time{ white-space:nowrap; flex:none; }
/* 默认身份 switch(订单中心右上,双身份才显示) */
.oc-defrole{ margin-left:auto; align-self:center; display:inline-flex; align-items:center; gap:4px; padding:4px 6px; border:1.5px solid var(--line); border-radius:12px; background:color-mix(in oklab,var(--surface) 70%,transparent); }
.oc-defrole .lb{ font-family:var(--cn); font-size:11px; color:var(--text-mute); padding:0 3px; }
.oc-defrole button{ appearance:none; border:none; cursor:pointer; padding:5px 11px; border-radius:9px; background:transparent; color:var(--text-dim); font-family:var(--cn); font-size:12px; font-weight:700; }
.oc-defrole button.on{ background:color-mix(in oklab,var(--v-bright) 16%,var(--surface)); color:var(--v-bright); box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--v-bright) 50%,transparent); }

/* 支付完成引导高亮:刚完成的单发光呼吸几秒 */
.ocard2.oc-glow{ border-color:var(--ok)!important; box-shadow:0 0 0 2px color-mix(in oklab,var(--ok) 55%,transparent), 0 0 34px -4px color-mix(in oklab,var(--ok) 60%,transparent); animation:ocglow 1.2s ease-in-out 4; }
@keyframes ocglow{ 0%,100%{ box-shadow:0 0 0 2px color-mix(in oklab,var(--ok) 55%,transparent), 0 0 34px -4px color-mix(in oklab,var(--ok) 60%,transparent); } 50%{ box-shadow:0 0 0 2px color-mix(in oklab,var(--ok) 30%,transparent), 0 0 14px -6px color-mix(in oklab,var(--ok) 35%,transparent); } }

/* 移动端:一级业务 tab / 子 tab 横滑不换行(修中文被压成竖排) */
@media(max-width:760px){
  .oc-bizbar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .oc-bizbar::-webkit-scrollbar{ display:none; }
  .oc-biztab{ flex:none; white-space:nowrap; }
  .oc-bizbar .oc-util{ flex:none; white-space:nowrap; margin-left:8px; }
  .oc-subtabs{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:100%; }
  .oc-subtabs::-webkit-scrollbar{ display:none; }
  .oc-subtab{ flex:none; white-space:nowrap; }
}

/* 智能提示条:sticky 常驻视野顶部(治"找不到自己的单"),轮到你=呼吸光效 */
.oc-actbar{ position:sticky; top:70px; z-index:60; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  background:color-mix(in oklab, var(--bg, #0d0a16) 82%, transparent); box-shadow:0 10px 30px -18px rgba(0,0,0,.55); }
.oc-actbar .ab-cta[data-tone=act]{ animation:abGlow 2.2s ease-in-out infinite; }
@keyframes abGlow{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--v-signature,#8b5cf6) 45%, transparent); }
  50%{ box-shadow:0 0 0 7px color-mix(in oklab, var(--v-signature,#8b5cf6) 0%, transparent), 0 0 22px -4px color-mix(in oklab, var(--v-signature,#8b5cf6) 55%, transparent); } }
.oc-actbar .ab-cta .at{ font-size:14.5px; }
@media(max-width:768px){ .oc-actbar{ top:58px; } }

/* 老板角色卡活跃高亮(有招募中/进行中/待确认派单,与陪玩 busy 同款节奏,紫系) */
.oc-role[data-r="boss"].busy{ opacity:1 !important; border-color:var(--v-signature) !important; background:color-mix(in oklab,var(--v-signature) 14%,var(--surface)) !important; animation:ocRoleBusy 1.5s ease-in-out infinite; }
.oc-role[data-r="boss"].busy .rt small{ color:var(--v-bright) !important; font-weight:700; }

/* 我方活跃子tab(我的派单/报名中/进行中/待确认/核对中有内容):上色发亮 */
/* 有内容但未选中:只亮文字 + 紫色数字角标,不再套渐变背景(否则会伪装成「已选中」造成误解)*/
.oc-subtab.glow:not(.on){ color:var(--v-bright); background:transparent; border-color:transparent; }
.oc-subtab.glow:not(.on):hover{ color:var(--v-bright); background:color-mix(in oklab,var(--v-bright) 10%,transparent); }
.oc-subtab.glow:not(.on) .pill{ background:color-mix(in oklab,var(--v-bright) 24%,transparent); color:var(--v-bright); }
@keyframes ocSubGlow{ 0%,100%{ box-shadow:0 0 10px -4px var(--v-signature); } 50%{ box-shadow:0 0 20px -2px var(--v-signature); } }

/* ===== v33 手机端紧凑化:角色卡短标题(派单/接单)+ 身份紫卡收紧 ===== */
.oc-role .rt .t-short{ display:none; }
@media(max-width:760px){
  .oc-roleswitch{ gap:9px; margin-bottom:12px; }
  .oc-role{ padding:11px 12px; gap:10px; justify-content:center; text-align:center; }
  .oc-role .ri{ width:32px; height:32px; border-radius:9px; }
  .oc-role .ri svg{ width:17px; height:17px; }
  .oc-role .rt b{ font-size:16px; }
  .oc-role .rt .t-full{ display:none; }
  .oc-role .rt .t-short{ display:inline; }
  .oc-role .rt small{ display:none; }
  .oc-role .oc-rolebadge{ top:6px; right:8px; }
  /* 身份紫卡:头像/字号/内衬全收紧,隐藏「双身份统一收件箱」附注 */
  .oc-id-who{ padding:12px 14px 6px; gap:11px; min-width:0; }
  .oc-id-who .av{ width:40px; height:40px; font-size:15px; }
  .oc-id-who .nm{ font-size:15px; }
  .oc-id-who .dualhint{ display:none; }
  .oc-wcard{ padding:2px 14px 13px; }
  .oc-wcard .wlabel{ font-size:11px; }
  .oc-wcard .wbig{ font-size:23px; }
  .oc-wcard .wbig .gem{ font-size:18px; }
  .oc-wcard .wrow{ gap:10px; }
  .oc-wcard .wbtn{ padding:8px 14px; font-size:12px; }
  /* 业务 tab 胶囊条:允许横滑,收紧内衬 */
  .oc-biztab{ padding:9px 13px; font-size:13.5px; }
  .oc-biztab svg{ width:15px; height:15px; }
  /* 「我要派单」不再独占一行:与状态子tab同排右侧固定,文案压缩为「派单」 */
  .oc-toolbar{ flex-wrap:nowrap; gap:8px; align-items:center; padding:14px 0 6px; }
  .oc-toolbar .oc-subtabs{ flex:1 1 auto; min-width:0; }
  .oc-toolbar .acts{ margin-left:0; flex:none; }
  .oc-toolbar .acts .btn{ padding:9px 14px; font-size:13px; white-space:nowrap; }
}
/* 派单主按钮长短文案:桌面全称,手机短称 */
.oc-toolbar .acts .t-short{ display:none; }
@media(max-width:760px){
  .oc-toolbar .acts .t-full{ display:none; }
  .oc-toolbar .acts .t-short{ display:inline; }
}

/* ============================================================
   身份主题化(用户点单):陪玩=橘黄 🔶 / 老板=深蓝 🔷
   目标:进订单中心第一眼、不用读字就知道自己在哪一侧。
   手段:①身份 token(--role-*) ②页面级冷暖底色 ③激活 tab/子tab/主按钮随身份变色
        ④右上角常驻身份徽章 ⑤角色卡老板侧从紫改深蓝
   ============================================================ */
.oc-root[data-role="boss"]{ --role-ac:#2f55d4; --role-ac2:#5b8bff; --role-soft:rgba(79,124,255,.13); --role-line:rgba(79,124,255,.5); }
.oc-root[data-role="player"]{ --role-ac:#e8590c; --role-ac2:#ffa94d; --role-soft:rgba(255,146,43,.15); --role-line:rgba(255,146,43,.55); }
/* ② 页面级冷暖底色:整块工作区铺一层极淡的身份色,切换身份时有 0.35s 过渡强化"换了世界"的感觉 */
.oc-root{ transition:background .35s ease; border-radius:20px; position:relative; }
.oc-root[data-role="boss"]{ background:linear-gradient(180deg, rgba(79,124,255,.07), rgba(79,124,255,.02) 260px, transparent 460px); }
.oc-root[data-role="player"]{ background:linear-gradient(180deg, rgba(255,146,43,.08), rgba(255,146,43,.02) 260px, transparent 460px); }
/* ④ 右上角常驻身份徽章:滚到哪都在,潜意识锚点 */
.oc-root::before{ position:absolute; top:8px; right:10px; z-index:6; pointer-events:none;
  font:900 12.5px var(--cn); letter-spacing:.1em; padding:6px 13px; border-radius:99px;
  color:var(--role-ac); background:var(--role-soft); border:1.5px solid var(--role-line); }
.oc-root[data-role="boss"]::before{ content:'🔷 老板 · 派单模式'; }
.oc-root[data-role="player"]::before{ content:'🔶 陪玩 · 接单模式'; }
/* ③ 业务 tab 激活态:身份色优先(原按业务各配色,身份感知 > 业务配色) */
.oc-root .oc-biztab.on[data-biz]{ color:#fff !important; background:linear-gradient(135deg,var(--role-ac),var(--role-ac2)); box-shadow:0 6px 18px -6px var(--role-ac); }
/* ③ 子 tab 激活态 */
.oc-root .oc-subtab.on{ color:#fff; background:linear-gradient(135deg,var(--role-ac),var(--role-ac2)); box-shadow:0 4px 14px -5px var(--role-ac); }
.oc-root .oc-subtabs[data-side="crown"] .oc-subtab.on{ color:#fff; background:linear-gradient(135deg,var(--role-ac),var(--role-ac2)); }
/* ③ 主按钮(我要派单/发布冠名/发布有奖…)随身份变色 */
.oc-root .btn-primary{ background:linear-gradient(135deg,var(--role-ac),var(--role-ac2)) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 8px 22px -9px var(--role-ac); }
/* ⑤ 角色卡:老板从紫改深蓝;两张卡在未选中时也保留各自色相(一眼分左右) */
.oc-role[data-r="boss"] .ri{ background:linear-gradient(135deg,#5b8bff,#2f55d4); }
.oc-role[data-r="boss"]{ border-color:color-mix(in oklab,#4d7cff 30%,var(--line)); }
.oc-role[data-r="player"]{ border-color:color-mix(in oklab,#ff922b 30%,var(--line)); }
.oc-root[data-role="boss"] .oc-role[data-r="boss"]{ border-color:#4d7cff; background:color-mix(in oklab,#4d7cff 13%,var(--surface)); box-shadow:inset 0 0 0 1px #4d7cff; }
/* 老板侧余额横条也换深蓝(陪玩侧保持原橘红渐变) */
.oc-root[data-role="boss"] .oc-band{ background:color-mix(in oklab,#4d7cff 9%,var(--surface)); border-color:color-mix(in oklab,#4d7cff 28%,var(--line)); }

/* ===== 手机端补丁(用户截图点单):身份徽章不撞标题 + 工具栏两行制 ===== */
@media(max-width:760px){
  /* 右上身份徽章缩小贴顶;「+老板视角」小提示与徽章重复,手机隐藏;标题右侧给徽章让位 */
  .oc-root::before{ top:0; right:0; font:900 10.5px var(--cn); letter-spacing:.05em; padding:4px 10px; }
  .oc-bosshint{ display:none !important; }
  .oc-head{ padding:2px 92px 12px 0 !important; }
  .oc-head h1{ font-size:27px !important; }
  /* 工具栏两行:第一行子tab横滑(已有),第二行动作整行——搜索框吃满剩余宽度,按钮不换行可横滑 */
  .oc-toolbar{ flex-wrap:wrap; row-gap:9px; }
  .oc-toolbar .oc-subtabs{ flex:1 1 100%; }
  .oc-toolbar .acts{ flex:1 1 100%; width:100%; display:flex; gap:8px; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .oc-toolbar .acts::-webkit-scrollbar{ display:none; }
  .oc-toolbar .acts [data-ocq]{ flex:1 1 130px; min-width:118px; width:auto !important; max-width:none !important; }
  .oc-toolbar .acts .btn{ flex:none; }
  /* 钱包横条收紧一点,少吃一屏 */
  .oc-band{ padding:12px 14px; }
}

/* ===== 冠名卡(偿还中)进度头手机重排(用户截图:还需4.5h/偿还进度/剩4.5h/0% 挤一行互相叠字) ===== */
@media(max-width:760px){
  .cw-mid{ flex-wrap:wrap; gap:8px 10px; min-width:0; }
  .cw-owed{ flex-direction:row; align-items:baseline; gap:8px; flex:1 1 auto; min-width:0; }
  .cw-owed .ov{ font-size:20px; }
  .cw-pct{ font-size:20px; order:2; margin-left:auto; }
  .cw-prog{ order:3; flex:1 1 100%; }
  .cw-prog .lab{ white-space:normal; flex-wrap:wrap; row-gap:2px; }
  /* 申报时间轴行:统一排版,允许换行不跳版;修改按钮/状态靠右 */
  .cw-rp{ flex-wrap:wrap; row-gap:6px; padding:10px 12px; }
  .cw-rp .ts{ margin-left:auto; }
}

/* ===== 手机第四轮:申报行统一 + 匿名徽章不竖排 + 卡底大按钮整行 + 身份紫卡重排 ===== */
.oc-anon{ white-space:nowrap; flex:none; }   /* 「匿名单」在窄容器里被挤成一字一行 */
@media(max-width:760px){
  /* 申报时间轴行:固定结构「标题…状态 / 时间整行 / 按钮右下」,多条记录不再一横一竖 */
  .cw-rp{ flex-wrap:wrap; row-gap:6px; padding:10px 12px; }
  .cw-rp .rpt{ flex:1 1 100%; order:3; margin-left:0; }
  .cw-rp .ts{ margin-left:auto !important; order:2; }
  .cw-rp .cw-btn{ order:4; margin-left:auto !important; }
  /* 卡底主按钮(申报已还时间/提前结算):整行大按钮,说明文字独立一行 */
  .cw-acts{ display:flex; flex-wrap:wrap; row-gap:8px; }
  .cw-acts .note{ flex:1 1 100%; }
  .cw-acts .cw-btn{ flex:1 1 100%; margin-left:0 !important; text-align:center; justify-content:center; padding:11px 0; }
  /* 身份紫卡重排:头像名字一行 → 余额一行 → 按钮三等分整行(不再右侧大空、按钮贴边) */
  .oc-id{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
  .oc-id-who{ align-items:center; }
  .oc-wcard{ width:100%; }
  .oc-wcard .wrow{ flex-wrap:wrap; gap:8px 12px; }
  .oc-wcard .wbig{ font-size:30px; }
  .oc-wcard .wbtns{ width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px; }
  .oc-wcard .wbtn{ width:100%; text-align:center; justify-content:center; padding:10px 0; }
}

/* ===== 手机端报名行(老板选人界面)紧凑化:2026-07-14 手机截图——元素竖排散开、试音条超宽被屏幕裁掉 ===== */
@media(max-width:760px){
  .grab2{ gap:9px; padding:11px 10px; }
  .grab2 .row1{ flex-wrap:wrap; row-gap:5px; }
  .grab2 .time{ margin-left:0; width:100%; order:9; }   /* 时间/编号独占末行,不再把报价/标签挤成一列 */
  .grab2 .row2{ gap:6px; }
  .grab2 .oc-vbtn{ max-width:100%; }
  .grab2 .oc-vbtn small{ display:none; }                /* 「· x分钟前」后缀手机上省掉,防超宽裁切 */
}

/* ==== 提醒四级体系(2026-07-14 拍板):🔴红=马上处理 🔵蓝=老板待办 🟠橙=陪玩待办 🟢绿=新机会 ⚪灰=纯计数 ==== */
.oc-subtab .pill-todo{ color:#fff; }
.oc-subtab .pill-todo.side-boss{ background:#2f6bff; }
.oc-subtab .pill-todo.side-player{ background:#ff8a2b; }
.oc-subtab .pill-opp{ background:var(--a-mint,#42e6a4); color:#093323; }
.oc-subtab.has-todo{ color:var(--text); }
.oc-biztab .oc-bizbadge.lv-urgent{ background:var(--a-coral); animation:ocAlertPulse 1.8s ease-out infinite; }
.oc-biztab .oc-bizbadge.lv-todo-boss{ background:#2f6bff; }
.oc-biztab .oc-bizbadge.lv-todo-player{ background:#ff8a2b; }
.oc-biztab .oc-bizbadge.lv-opp{ background:var(--a-mint,#42e6a4); color:#093323; }
/* 新发的单落进列表的光晕脉冲(2026-07-26 乐观发送的落点确认) */
.oc-fresh{ animation:ocFreshPulse 2.2s ease-out; }
@keyframes ocFreshPulse{ 0%{ box-shadow:0 0 0 0 rgba(157,107,255,.75); transform:translateY(8px); opacity:.35; } 35%{ opacity:1; transform:none; } 100%{ box-shadow:0 0 0 28px rgba(157,107,255,0); } }
@media (prefers-reduced-motion:reduce){ .oc-fresh{ animation:none; } }

/* ==== 新手派单引导(2026-07-27):首次光晕+气泡 / 空态大 CTA / 流程条步骤①可点 ==== */
.oc-toolbar .acts{position:relative}
.oc-post-glow{animation:ocPostPulse 1.6s ease-out 4}
@keyframes ocPostPulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--a-purple,#7c4dff) 55%,transparent)}70%{box-shadow:0 0 0 13px transparent}100%{box-shadow:0 0 0 0 transparent}}
.oc-post-bubble{position:absolute;top:calc(100% + 9px);right:6px;background:var(--a-purple,#7c4dff);color:#fff;font:700 12px var(--cn,system-ui);padding:7px 12px;border-radius:10px;white-space:nowrap;z-index:6;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none}
.oc-post-bubble::before{content:'';position:absolute;top:-5px;right:26px;width:10px;height:10px;background:inherit;transform:rotate(45deg)}
.oc-empty.oc-empty-cta{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px 40px}
.oc-empty-cta .ec-ico{font-size:40px;line-height:1}
.oc-empty-cta .ec-title{font:800 19px var(--cn,system-ui);color:var(--text)}
.oc-empty-cta .ec-sub{font:500 13px var(--cn,system-ui);color:var(--text-mute)}
.oc-empty-cta .ec-btn{height:46px;padding:0 30px;font-size:15.5px;border-radius:14px;margin-top:6px;display:inline-flex;align-items:center;gap:8px}
.oc-empty-cta .ec-steps{font:600 12px var(--cn,system-ui);color:var(--text-mute);opacity:.85;margin-top:2px}
.oc-fs-link{cursor:pointer}
.oc-fs-link:hover{color:var(--a-purple,#7c4dff);text-decoration:underline;text-underline-offset:3px}
.oc-empty-cta .ec-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.oc-empty-cta .ec-btns .ec-btn{margin-top:0}
.oc-empty-cta .ec-btn2{height:40px;padding:0 18px;font-size:13px;border-radius:12px}

/* ===== 冠名卡手机重排 · 第二轮(2026-08-04 用户:「手机 UI 显示有问题,陪玩这块看冠名」)=====
   症状:卡片左半边(头像/名字/状态/时间行)被压成一列,「🕐…发布 · 完成 2026.08.03 · #PJ7GaDrJ」
   一个字一行竖着排下来。

   成因:.cw-main 是 flex,里面并排四块 —— .cw-lead(头像+名字) / .cw-tier(半日冠) /
   .cw-mid(偿还进度) / .cd-chev。上一轮只把 .cw-mid 改成可换行,.cw-lead 没动:
   它在 JS 里被内联成 flex:1;min-width:0,而 .cw-mid 的 flex-basis 还留着 240px ——
   于是窄屏下 .cw-mid 先分走 240px,.cw-lead 被压到几十像素,里面的等宽字体只能一字一行。

   修法:手机上让 .cw-lead 独占一行(它是这张卡最先要读的信息),
   .cw-tier / .cw-mid 各自往下排;折叠箭头改成绝对定位钉在右上角,不再参与挤宽度。 */
@media(max-width:760px){
  .cw-main{ gap:10px 12px; padding:13px 14px; align-items:flex-start; }
  .cw-lead{ flex:1 1 100% !important; width:100% !important; min-width:0 !important; }
  .cw-lead > div{ flex:1 1 auto; min-width:0; }
  .cw-submeta{ white-space:normal; word-break:break-word; line-height:1.6; }
  .cw-subline{ flex-wrap:wrap; row-gap:5px; }
  .cw-tier{ align-self:flex-start; }
  .cw-mid{ flex:1 1 100%; min-width:0; }
  /* 箭头钉右上:留出右边距免得压到「已完成」那排徽章 */
  .cw-main .cd-chev{ position:absolute; top:13px; right:11px; margin-left:0 !important; align-self:auto !important; }
  .cw-main > .cw-tier{ margin-right:26px; }
}