/* ==========================================================================
   校鱼 · Vivid 色彩层次增强层
   --------------------------------------------------------------------------
   beautiful.css 建立 token 与 hairline 骨架；这一层只做一件事：给指挥中心注入
   色彩层次与活力，让"哪个数字重要、哪个动作是主操作、状态走到了哪一步"
   一眼可辨。原则：

     1. 色相来自既有 token（--accent、状态色），用 color-mix 派生，
        换品牌色时整层跟随，不产生新的孤色。
     2. 渐变只出现在"焦点"上：主按钮、页面主标题、当前导航——克制使用。
     3. 亮暗两套主题分别调对比，不做反转滤镜。
     4. 不改变任何布局尺寸，失败也只损失色彩，不损失可用性。
   ========================================================================== */

/* --- 1. 主按钮：品牌渐变 + 悬浮提升 ------------------------------------- */
.button.primary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 92%, white) 0%,
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 86%, black) 100%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 65%, black),
              0 1px 2px rgb(16 24 40 / 12%),
              0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent);
}
.button.primary:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 88%, white) 0%,
    color-mix(in srgb, var(--accent) 94%, black) 60%,
    color-mix(in srgb, var(--accent) 80%, black) 100%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, black),
              0 2px 4px rgb(16 24 40 / 14%),
              0 8px 20px color-mix(in srgb, var(--accent) 34%, transparent);
  transform: translateY(-1px);
}
.button.primary:active { transform: translateY(0); }
.button.danger {
  background: linear-gradient(135deg, color-mix(in srgb, var(--red) 90%, white), var(--red)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 60%, black),
              0 4px 12px color-mix(in srgb, var(--red) 26%, transparent);
}
.button:disabled {
  opacity: .55;
  filter: saturate(.4);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--shadow-btn);
}

/* --- 2. 页面主标题：关键词以品牌渐变点亮 -------------------------------- */
h1, .desk-heading h1, .page-heading h1, .ops-heading h1 {
  background: linear-gradient(120deg,
    var(--ink) 0%,
    var(--ink) 42%,
    color-mix(in srgb, var(--accent) 82%, black) 78%,
    var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.dark h1, html.dark .desk-heading h1, html.dark .page-heading h1, html.dark .ops-heading h1 {
  background: linear-gradient(120deg,
    #f2f5f3 0%, #f2f5f3 42%,
    color-mix(in srgb, var(--accent) 55%, white) 80%,
    var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- 3. 当前导航：渐变指示条 -------------------------------------------- */
.sidebar .nav-link { position: relative; }
.sidebar .nav-link.active::before {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #7fd6a8));
  border-radius: 99px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* --- 4. 首页问候与经营速览卡：轻渐变底 ---------------------------------- */
.desk-heading {
  background:
    radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 55%),
    radial-gradient(90% 150% at 100% 20%, color-mix(in srgb, #7fb8d4 8%, transparent) 0%, transparent 50%);
  border-radius: 20px;
  padding: 20px 22px;
  margin: 0 0 18px;
}
html.dark .desk-heading {
  background:
    radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%),
    radial-gradient(90% 150% at 100% 20%, color-mix(in srgb, #7fb8d4 10%, transparent) 0%, transparent 50%);
}
.business-band .band-figure strong {
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 80%, black), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- 5. 工单页 hero：双色渐变云 ----------------------------------------- */
.ops-heading {
  background:
    radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 55%),
    radial-gradient(70% 140% at 100% 0%, color-mix(in srgb, var(--ops-amber, #c46a1e) 9%, transparent) 0%, transparent 55%);
  border-radius: 22px;
  padding: 22px 24px;
  margin: 0 0 22px !important;
}
html.dark .ops-heading {
  background:
    radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 55%),
    radial-gradient(70% 140% at 100% 0%, color-mix(in srgb, var(--ops-amber, #dd9950) 12%, transparent) 0%, transparent 55%);
}
.ops-live-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* --- 6. 卡片悬浮的呼吸感 ------------------------------------------------ */
.metric, .shortcut, .week-card, .list-row, .ops-stat {
  transition: transform .18s cubic-bezier(.23, 1, .32, 1), box-shadow .18s cubic-bezier(.23, 1, .32, 1);
}
.metric:hover, .week-card:hover {
  box-shadow: var(--shadow-raised), 0 10px 24px color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateY(-1px);
}
a.shortcut:hover { transform: translateY(-2px); box-shadow: var(--shadow-panel); }

/* --- 7. 滚动条与选区：细节里的品牌感 ------------------------------------ */
* { scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* --- 8. 进度条与徽章：状态色微光 ---------------------------------------- */
.ops-table progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8fd3ae));
}
.badge.good { box-shadow: 0 0 8px color-mix(in srgb, var(--green, #2f7d4f) 16%, transparent); }
.badge.warn { box-shadow: 0 0 8px color-mix(in srgb, var(--orange, #c46a1e) 18%, transparent); }
.badge.bad { box-shadow: 0 0 8px color-mix(in srgb, var(--red, #c8393f) 18%, transparent); }

/* --- 9. 弹窗：顶部品牌渐变细线 ------------------------------------------ */
.ops-dialog { border-top: 3px solid transparent; }
.ops-dialog::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, #7fb8d4));
}

/* --- 10. 无障碍： prefers-reduced-motion 下关闭位移 ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .button.primary:hover, a.shortcut:hover, .metric:hover, .week-card:hover { transform: none; }
}

/* ==========================================================================
   GitHub 素材落地层 v2 —— Tremor / shadcn / SoybeanAdmin / Magic UI 手法
   ========================================================================== */

/* --- Tremor KPI 卡：弱化标签 + 等宽大数字 + delta 徽章 ------------------- */
.metric {
  gap: 8px;
  border-radius: 16px;
  padding: 18px 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, transparent), transparent 55%),
    var(--surface);
}
.metric > label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.metric > strong {
  font-size: 30px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  background: linear-gradient(160deg, var(--ink) 20%, color-mix(in srgb, var(--ink) 62%, transparent) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.dark .metric > strong {
  background: linear-gradient(160deg, #f4f7fa 20%, color-mix(in srgb, #f4f7fa 60%, transparent) 95%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Delta 徽章（Tremor BadgeDelta）：箭头 + 幅度，色底 pill */
.metric small { font-size: 12px; }
.delta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 7px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* 中式语义：涨红、跌绿（与 .up/.down、week-delta 一致） */
.delta-badge.up {
  color: color-mix(in srgb, var(--red) 88%, black);
  background: color-mix(in srgb, var(--red) 13%, transparent);
}
.delta-badge.down {
  color: color-mix(in srgb, var(--green) 88%, black);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}
html.dark .delta-badge.up { color: var(--red); background: color-mix(in srgb, var(--red) 20%, transparent); }
html.dark .delta-badge.down { color: var(--green); background: color-mix(in srgb, var(--green) 20%, transparent); }

/* --- SoybeanAdmin 导航：激活项 pill + 渐变，品牌徽章光晕 ----------------- */
.sidebar .nav-link {
  position: relative;
  border-radius: 12px;
  transition: background .18s cubic-bezier(.23,1,.32,1), color .18s, transform .18s;
}
.sidebar .nav-link:hover { transform: translateX(2px); }
.sidebar .nav-link.active {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent) 85%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}
.sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 22%;
  height: 56%;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, white));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.sidebar .seal {
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent) 60%, color-mix(in srgb, var(--accent) 75%, black));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent),
              inset 0 1px 0 color-mix(in srgb, white 40%, transparent);
}

/* --- Magic UI 流光边框：高严重度预警卡片 --------------------------------- */
@keyframes ops-beam {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.ops-alert.high {
  position: relative;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(100deg,
      color-mix(in srgb, var(--red) 55%, transparent),
      color-mix(in srgb, var(--red) 12%, transparent) 30%,
      color-mix(in srgb, var(--orange) 40%, transparent) 55%,
      color-mix(in srgb, var(--red) 55%, transparent)) border-box;
  background-size: auto, 200% 100%;
  animation: ops-beam 6s linear infinite;
}
.ops-alert.high::before { display: none; }

/* --- Linear 表格行：hover 左侧状态渐变条 --------------------------------- */
.ops-table tbody tr { position: relative; }
.ops-table tbody tr::after {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  height: 64%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, white));
  transition: width .18s cubic-bezier(.23,1,.32,1);
}
.ops-table tbody tr:hover::after { width: 3px; }

/* --- shadcn 空状态：渐变图标容器 + 虚线卡 -------------------------------- */
.ops-empty {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 60%);
}
.ops-empty > .ui-icon {
  width: 56px;
  height: 56px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--accent) 20%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* --- 数字排版：全部统计位使用等宽数字 ------------------------------------ */
.ops-quantity, .ops-stat strong, .ops-summary strong, .band-figure strong,
.week-grid strong, .rail-meta b, .ops-alert-count, .ops-tab span {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .ops-alert.high { animation: none; background-size: auto, 100% 100%; }
  .sidebar .nav-link:hover { transform: none; }
}

/* ==========================================================================
   修复与排版收敛（截图审计后）
   ========================================================================== */

/* --- 数字专用字体栈：西文数字用 Segoe UI（等宽特性稳定），
       中文回退雅黑，消除中英混排的基线与字宽冲突 -------------------------- */
:root { --font-num: 'Segoe UI', 'SF Pro Text', 'Helvetica Neue', Arial,
        'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif; }
.metric > strong, .ops-stat strong, .ops-summary strong, .band-figure strong,
.week-grid strong, .ops-quantity, .delta-badge, .rail-meta b, .ops-alert-count,
.ops-tab span, .band-stats b, .week-delta {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* --- h1 渐变收窄：主体保持墨色，仅尾部透一点品牌色，消除一行内的割裂 ---- */
h1, .desk-heading h1, .page-heading h1, .ops-heading h1 {
  background: linear-gradient(115deg,
    var(--ink) 0%, var(--ink) 58%,
    color-mix(in srgb, var(--ink) 72%, var(--accent)) 88%,
    color-mix(in srgb, var(--ink) 55%, var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html.dark h1, html.dark .desk-heading h1, html.dark .page-heading h1, html.dark .ops-heading h1 {
  background: linear-gradient(115deg,
    #f0f4f2 0%, #f0f4f2 58%,
    color-mix(in srgb, #f0f4f2 60%, var(--accent)) 88%,
    color-mix(in srgb, #f0f4f2 42%, var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- KPI 卡脚注：徽章与说明文字的间距 ------------------------------------ */
.metric-foot { display: flex; align-items: center; gap: 7px; min-width: 0; }
.metric-foot small { color: var(--ink-3); }

/* --- 本周经营速览：这些 class 一直没有样式定义，补全 --------------------- */
.week-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-hairline);
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.week-grid > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.week-grid small { font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.week-grid strong {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}
.week-grid .week-best { color: var(--orange); }
.week-sub { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.week-delta { font-size: 12px; font-weight: 600; }
/* 中式语义：涨红、跌绿（与 .up/.down 一致） */
.week-delta.up { color: var(--red); }
.week-delta.down { color: var(--green); }

@media (max-width: 640px) {
  .week-grid { grid-template-columns: 1fr; gap: 12px; }
  .week-grid strong { font-size: 20px; }
}

/* --- 全角问号/标点在渐变裁切下偏细的问题：标题字重保持 700 --------------- */
.desk-heading h1, .ops-heading h1 { font-weight: 700; }

/* --- week 卡精修：防数字换行、列间留白、delta 长度收紧 ------------------- */
.week-grid { gap: 18px; }
.week-grid strong { font-size: 19px; white-space: nowrap; }
.week-delta { font-size: 11.5px; margin-top: 2px; }
.week-sub { font-size: 11.5px; }
@media (max-width: 640px) {
  .week-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .week-grid strong { font-size: 16px; }
}

/* ==========================================================================
   数字人 · 校鱼本鱼（本地 SVG 吉祥物）
   ========================================================================== */
.avatar-stage-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 20px 20px;
  border-radius: 22px;
  background:
    radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-hairline);
}
.avatar-figure { width: min(360px, 82vw); }
.avatar-figure svg { width: 100%; height: auto; display: block; overflow: visible; }
.avatar-status { font-size: 13px; color: var(--ink-2); min-height: 1.4em; margin: 0; }

/* 待机：整体缓游 */
.avatar-fish .av-body-motion { transform-origin: 170px 150px; }
.avatar-fish.idle { animation: av-drift 4.2s ease-in-out infinite alternate; }
@keyframes av-drift {
  from { transform: translateY(-5px) rotate(-1.2deg); }
  to   { transform: translateY(6px) rotate(1.4deg); }
}
/* 尾巴：待机慢摆，说话快摆 */
.av-tail { transform-origin: 234px 158px; }
.avatar-fish.idle .av-tail { animation: av-tail 2.8s ease-in-out infinite alternate; }
.avatar-fish.speaking .av-tail { animation: av-tail .9s ease-in-out infinite alternate; }
@keyframes av-tail {
  from { transform: rotate(-9deg) scaleX(.96); }
  to   { transform: rotate(11deg); }
}
/* 侧鳍微摆 */
.av-fin { transform-origin: 128px 186px; }
.avatar-fish.idle .av-fin { animation: av-fin 3.6s ease-in-out infinite alternate; }
@keyframes av-fin { from { transform: rotate(-20deg); } to { transform: rotate(-4deg); } }
/* 眨眼由 JS 直接缩放 .av-eyes */
.av-eyes { transition: transform .12s ease; transform-origin: 116px 132px; transform-box: view-box; }
/* 气泡：仅说话时显示 */
.av-bubble { opacity: 0; fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 2.4; }
.avatar-fish.speaking .av-bubble { animation: av-bubble 1.8s ease-out infinite; }
@keyframes av-bubble {
  0% { opacity: 0; transform: translateY(10px) scale(.6); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.08); }
}
/* 思考点：仅思考时显示 */
.av-dot { opacity: 0; fill: color-mix(in srgb, var(--accent) 70%, transparent); }
.avatar-fish.thinking .av-dot { animation: av-think 1.2s ease-in-out infinite alternate; }
@keyframes av-think { from { opacity: .15; transform: translateY(3px); } to { opacity: .95; transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .avatar-fish.idle, .avatar-fish.idle .av-tail, .avatar-fish.speaking .av-tail,
  .avatar-fish.speaking .av-bubble, .avatar-fish.thinking .av-dot,
  .avatar-fish.idle .av-fin { animation: none; }
}

/* --- 团队账号页：表单限宽，避免 1400px 宽的输入框 ----------------------- */
#workspace .access-account-form { max-width: 460px; }
#workspace .access-user-list { max-width: 560px; }
#workspace .access-user-list p {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); margin: 0 0 8px; font-size: 13.5px;
}
#workspace > h2:first-child { font-size: 22px; margin: 6px 0 10px; }

/* ==========================================================================
   校鱼自己的东西：产线传送带 + 全局小鱼伙伴
   （车间心智模型 + bongo.cat 式的响应式互动，网上后台没有的组合）
   ========================================================================== */

/* --- 产线传送带：五个工位沿一条流动的带子排布 ---------------------------- */
.ops-conveyor {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  border-radius: 20px;
  padding: 16px 22px;
  margin: 0 0 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ops-navy, #1a2948) 92%, black), color-mix(in srgb, var(--ops-navy, #1a2948) 78%, black));
  color: #dfe7f5;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 8%, transparent), 0 10px 30px color-mix(in srgb, #0a1424 35%, transparent);
  overflow: hidden;
}
html.dark .ops-conveyor {
  background: linear-gradient(180deg, #101a2c, #0c1524);
}
/* 传送带带面：流动的虚线 */
.ops-conveyor::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 70%, white) 0 16px,
    transparent 16px 34px);
  opacity: .5;
  animation: ops-belt-flow 1.1s linear infinite;
}
@keyframes ops-belt-flow { from { background-position: 0 0; } to { background-position: 34px 0; } }

.ops-station {
  --lamp: #5a6b85;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 1 1 0;
  padding: 10px 8px 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: background .18s cubic-bezier(.23,1,.32,1), transform .18s;
}
.ops-station:hover { background: color-mix(in srgb, white 6%, transparent); transform: translateY(-2px); }
.ops-station.active {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, white);
}
.ops-station-lamp {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lamp) 22%, transparent);
}
.ops-station.loaded { --lamp: var(--accent); }
.ops-station.loaded .ops-station-lamp {
  background: color-mix(in srgb, var(--accent) 55%, white);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent),
              0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
  animation: ops-lamp-pulse 2.2s ease-in-out infinite;
}
@keyframes ops-lamp-pulse {
  0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  50% { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); }
}
.ops-station strong { font-size: 14.5px; font-weight: 600; letter-spacing: .02em; }
.ops-station-count {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: color-mix(in srgb, white 62%, transparent);
}
.ops-station.loaded .ops-station-count { color: #fff; }
/* 带子上的传送段：虚线在工位之间流动，有货时亮起 */
.ops-belt {
  align-self: center;
  flex: 0 0 46px;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, white 22%, transparent) 0 8px, transparent 8px 16px);
  margin-bottom: 26px;
}
.ops-belt.busy {
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 75%, white) 0 8px, transparent 8px 16px);
  animation: ops-belt-flow 0.7s linear infinite;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* --- 全局小鱼伙伴（右下角悬浮） ----------------------------------------- */
#xiaoyu-float { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.float-fish-launcher {
  position: relative;
  width: 58px; height: 52px;
  border: 0; padding: 4px 2px 0; cursor: pointer;
  border-radius: 18px 18px 22px 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  box-shadow: 0 6px 22px color-mix(in srgb, #0a1424 26%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 32%, transparent);
  backdrop-filter: blur(6px);
  transition: transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s;
}
.float-fish-launcher:hover { transform: translateY(-3px) scale(1.04); }
.float-fish-launcher .avatar-fish.mini { width: 100%; height: auto; animation: av-drift 3.4s ease-in-out infinite alternate; }
.float-fish-launcher.has-alerts { box-shadow: 0 6px 26px color-mix(in srgb, var(--red) 38%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--red) 55%, transparent); }
.float-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 99px;
  background: var(--red); color: #fff;
  font: 600 11px/20px var(--font-num);
  text-align: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--red) 50%, transparent);
}
.float-panel {
  width: 272px;
  padding: 16px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-panel), 0 18px 48px color-mix(in srgb, #0a1424 22%, transparent);
  animation: float-in .22s cubic-bezier(.23,1,.32,1);
}
@keyframes float-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.float-panel p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.float-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- hop 庆祝：报工/发货/核对成功时小鱼跳起 ------------------------------ */
.avatar-fish.hop { animation: av-hop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes av-hop {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-18px) rotate(-8deg) scale(1.04); }
  55% { transform: translateY(0) rotate(3deg); }
  75% { transform: translateY(-7px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ops-conveyor::after, .ops-belt.busy, .ops-station.loaded .ops-station-lamp { animation: none; }
  .avatar-fish.hop { animation: none; }
  .float-fish-launcher .avatar-fish.mini { animation: none; }
  .float-panel { animation: none; }
}

/* --- 创意工坊：出图画廊 -------------------------------------------------- */
.studio-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.studio-thumb {
  border: 0; padding: 0; cursor: zoom-in; border-radius: 16px; overflow: hidden;
  background: var(--inset); box-shadow: var(--shadow-hairline);
  transition: transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s;
  aspect-ratio: 1; display: block;
}
.studio-thumb:hover { transform: translateY(-3px); box-shadow: var(--shadow-panel); }
.studio-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-image { max-width: 100%; border-radius: 16px; box-shadow: var(--shadow-hairline); }
.studio-dialog { width: min(860px, 94vw); }

/* --- 模型设置：服务商一键接入 chips -------------------------------------- */
.provider-quick {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 6px;
  border-radius: 14px; background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line);
}
.provider-quick strong { font-size: 13px; color: var(--ink-2); margin-right: 2px; }
.button.chip {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-btn);
  font-weight: 600;
}
.button.chip:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-1px);
}