/* ============================================================
   AI万事屋 运营后台 · COLD GEOMETRY
   冷几何风格铁律：无圆角、无渐变装饰、无毛玻璃、无发光、
   主题色只表示可操作/正在运行。切角、菱形、45° 斜纹是唯一形状语言。
   2026-08-04 cold-geo-v1
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root,
body[data-theme="dark"] {
  --bg: #0B0C0D;
  --panel: #111315;
  --panel2: #171A1D;
  --line: #23272B;
  --line2: #343A40;
  --fg: #E9EBED;
  --fg2: #9BA2A9;
  /* 风格包给的 #798086 落在 --panel2(#171A1D) 上只有 4.36:1，
     表头 / 等宽小标签达不到自查要求的 4.5:1，提亮到 #868D93（5.3:1）。 */
  --fg3: #868D93;
  --accent: #3D7BFF;
  --ink: #04060C;
  /* 主色分两个角色：--accent 用于实底 / 描边 / 菱形，--accent-text 用于文字。
     深色底上两者相同；浅色底见 body[data-theme="light"]。 */
  --accent-text: var(--accent);
  --warn: #E3A93F;
  --danger: #E0533F;
  --success: #5FCF8E;
  --accent-12: color-mix(in oklab, var(--accent) 12%, transparent);
  --accent-20: color-mix(in oklab, var(--accent) 20%, transparent);
  --shadow-float: 0 20px 44px -14px rgba(0, 0, 0, .7);
  --shadow-window: 0 40px 100px -24px rgba(0, 0, 0, .75);
  --hatch: repeating-linear-gradient(45deg, transparent 0 7px, var(--line) 7px 8px);
  --hatch-strong: repeating-linear-gradient(45deg, transparent 0 5px, var(--line2) 5px 6px);
  --font-ui: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
}

body[data-theme="light"] {
  --bg: #F4F5F6;
  --panel: #EDEEEF;
  --panel2: #FFFFFF;
  --line: #DCDFE1;
  --line2: #BCC1C5;
  --fg: #15171A;
  --fg2: #585E63;
  /* 风格包给的 #6E747A 落在 --panel(#EDEEEF) 上只有 4.0:1，
     达不到交付自查要求的 4.5:1，压深到 #63696F（4.7:1）。 */
  --fg3: #63696F;
  /* 风格包给的 .7 / .75 黑是照深色底调的；压在 #F4F5F6 上会糊成一团灰。
     保持纯黑无彩色，只降不透明度。 */
  --shadow-float: 0 18px 40px -18px rgba(0, 0, 0, .3);
  --shadow-window: 0 32px 80px -28px rgba(0, 0, 0, .32);
  /* 九个主题色都是照深色底选的亮色。直接当文字色压在 #EDEEEF 上：
     电光蓝 3.3:1、薄荷霜 1.4:1，全线达不到自查要求的 4.5:1。
     文字用同色相的深版本，实底 / 描边 / 菱形仍用原色，换肤性格不变。 */
  --accent-text: color-mix(in oklab, var(--accent) 62%, #0B0C0D);
  /* --danger / --warn / --success 也是照深色底选的。
     #E0533F 压在 #EDEEEF 上只有 3.3:1，#E3A93F 更低。
     浅色档整组换成同色相的深版本（风格包本来就要求浅色令牌整组覆盖）。 */
  --danger: #C0301A;
  --warn: #8A6100;
  --success: #17703D;
  /* --hatch 在 :root 上就已经把 var(--line) 代换成深色值了，
     浅色主题继承到的是深色斜纹，必须整组重写。 */
  --hatch: repeating-linear-gradient(45deg, transparent 0 7px, #DCDFE1 7px 8px);
  --hatch-strong: repeating-linear-gradient(45deg, transparent 0 5px, #BCC1C5 5px 6px);
}

/* 按百分比调深对浅色系主题色（薄荷霜 / 雪丁香）还是不够。
   支持相对颜色语法时，直接锁定 oklch 亮度：色相与彩度不变，
   九个主题色在明暗两档都落在同一档对比度。 */
@supports (color: oklch(from red l c h)) {
  body[data-theme="light"] {
    --accent-text: oklch(from var(--accent) .47 c h);
  }

  /* 深色底上，主色文字还会压在 12% 主色底的侧栏当前项上：
     电光蓝 #3D7BFF 在那层底上只有 3.3:1。给一个亮度下限，
     本来就够亮的主题色（薄荷霜、雪丁香）保持原样。 */
  :root,
  body[data-theme="dark"] {
    --accent-text: oklch(from var(--accent) max(l, .74) c h);
  }
}

/* ---------- 全局 ---------- */
* {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html,
body,
#app {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 12.5px;
  color: inherit;
}

button {
  cursor: pointer;
  border-radius: 0;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: .45;
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

select option {
  background: var(--panel2);
  color: var(--fg);
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

a:hover {
  color: var(--fg);
}

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent-20);
}

/* ---------- 排版与工具类 ---------- */
/* .mono 挂的是数据，不是标签：detail_json、sha256、product_code、
   workflow_id、激活码都是原文。强制大写会把 {"ok":true} 显示成 {"OK":TRUE}，
   把 aiwanshiwu-creator-machine 显示成另一个字符串。
   规范里的「等宽大写 + 宽字距」只给状态/单位/参数名，那些各自有自己的规则。 */
.mono {
  font-family: var(--font-mono);
  letter-spacing: .06em;
}

.subtle {
  color: var(--fg3);
  font-size: 11.5px;
}

.mini {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--fg3);
  text-transform: uppercase;
}

.muted {
  color: var(--fg3);
}

.danger {
  color: var(--danger);
}

.error-line {
  color: var(--danger);
}

.readonly-id {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--fg3);
}

.field-hint {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--fg3);
  text-transform: uppercase;
}

.ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ---------- 滚动条 ---------- */
.workspace-scroll::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.table-wrap--scroll::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.creator-usage-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.workspace-scroll::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.table-wrap--scroll::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
.creator-usage-scroll::-webkit-scrollbar-thumb {
  background: var(--line2);
  border: 2px solid var(--bg);
}

.workspace-scroll::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.table-wrap--scroll::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
.creator-usage-scroll::-webkit-scrollbar-track {
  background: var(--bg);
}

/* ============================================================
   外壳：顶栏 / 读数条 / 布局 / 状态栏
   ============================================================ */
/* 控制台外壳固定在视口内：顶栏 / 读数条 / 状态栏常驻，
   只有 .workspace-scroll 滚动（app.js 的滚动位置保存也依赖这一点）。 */
.ops-app {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
}

.topbar {
  height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line2);
}

.topbar-logo {
  width: 26px;
  height: 26px;
  display: block;
  flex: none;
}

.topbar-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}

.topbar-divider {
  width: 1px;
  height: 22px;
  flex: none;
  background: var(--line2);
}

.topbar-console {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--fg3);
  white-space: nowrap;
}

.topbar-flex {
  flex: 1;
}

.topbar-dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--accent);
  transform: rotate(45deg);
}

.topbar-online {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--accent-text);
  white-space: nowrap;
}

.accent-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.accent-swatch {
  width: 15px;
  height: 15px;
  flex: none;
  display: inline-block;
  /* 全局 `* { border-radius: 0 !important }` 是这套方正风格的底座，
     色块要圆只能同样用 !important 顶回去；选中态那圈 outline 会跟着圆角走 */
  border-radius: 50% !important;
  cursor: pointer;
}

.topbar-btn {
  height: 30px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: color 120ms linear, border-color 120ms linear, background-color 120ms linear;
}

.topbar-btn:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

/* 读数条：六等分 */
.server-usage-panel {
  height: 76px;
  flex: none;
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border-bottom: 1px solid var(--line2);
  overflow: hidden;
}

.stats-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 13px 18px;
  border-right: 1px solid var(--line);
}

.stats-cell:last-child {
  border-right: none;
}

.stats-cell-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.stats-cell-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--fg3);
  text-transform: uppercase;
  white-space: nowrap;
}

.stats-cell:first-child .stats-cell-label {
  color: var(--accent-text);
}

.stats-cell-meta {
  flex: 1;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--fg3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-cell-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-track {
  height: 3px;
  background: var(--line);
  overflow: hidden;
}

.stats-track.is-hatch {
  background: repeating-linear-gradient(45deg, var(--line) 0 4px, transparent 4px 8px);
}

.stats-fill {
  height: 100%;
  background: var(--fg3);
}

.stats-cell:first-child .stats-fill {
  background: var(--accent);
}

/* 布局：侧栏 + 工作区 */
.layout {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.nav-panel {
  width: 336px;
  flex: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--line2);
}

.nav-user {
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--line);
}

/* 管理员头像用站点 logo，不再是斜纹占位块 */
.nav-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--line2);
  background: var(--panel2) url("/admin/app-logo.png") center / 26px 26px no-repeat;
}

.nav-user-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.nav-user-copy strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--fg);
}

.nav-user-copy span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--accent-text);
}

.nav-section-label {
  padding: 22px 22px 13px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--fg3);
  text-transform: uppercase;
}

.nav {
  display: flex;
  flex-direction: column;
}

.nav-item {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  width: 100%;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--fg2);
  font-size: 12.5px;
  text-align: left;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}

/* 菱形状态标记：1px 描边 = 未选中，实底 = 当前页 */
.nav-item::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  box-sizing: border-box;
  border: 1px solid var(--line2);
  transform: rotate(45deg);
  transition: background-color 120ms linear, border-color 120ms linear;
}

.nav-item.active::before {
  border-color: var(--accent);
  background: var(--accent);
}

.nav-item:hover {
  background: var(--panel2);
}

.nav-item:hover::before {
  border-color: var(--accent);
}

.nav-item.active {
  border-left-color: var(--accent);
  background: var(--accent-12);
  color: var(--accent-text);
  font-weight: 700;
}

.nav-num {
  width: 22px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--fg3);
}

.nav-item.active .nav-num {
  color: var(--accent-text);
}

.nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--fg3);
}

.nav-item.active .nav-badge {
  color: var(--accent-text);
}

.nav-footer {
  margin: 22px;
  margin-top: auto;
  flex: none;
  border: 1px solid var(--line);
}

.nav-footer-head {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--accent-text);
}

.nav-footer-accent {
  width: 3px;
  height: 14px;
  background: var(--accent);
}

.nav-footer-body {
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.nav-footer-body span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--fg3);
}

.nav-footer-body strong {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg2);
}

.workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workspace-scroll {
  flex: 1;
  overflow: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.admin-build-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--fg3);
  text-transform: uppercase;
  text-align: right;
}

/* 状态栏 */
.statusbar {
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 22px;
  background: var(--panel);
  border-top: 1px solid var(--line2);
}

.statusbar-accent {
  width: 3px;
  height: 16px;
  background: var(--accent);
}

.statusbar-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--accent-text);
}

.statusbar-dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--accent);
  transform: rotate(45deg);
}

.statusbar-text {
  font-size: 12px;
  color: var(--fg2);
}

.statusbar-flex {
  flex: 1;
}

.statusbar-version {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--fg3);
  text-transform: uppercase;
}

/* ============================================================
   登录页
   ============================================================ */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--bg);
}

.login-card {
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line2);
  border-top: 3px solid var(--accent);
  background: var(--panel);
  box-shadow: var(--shadow-float);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-logo {
  width: 34px;
  height: 34px;
  display: block;
  flex: none;
}

.brand-lockup h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
}

/* 「运营后台」是中文，等宽 + .18em 会拉成「运 营 后 台」 */
.brand-lockup p {
  margin: 3px 0 0;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--fg3);
}

.login-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.login-copy strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}

.login-copy span {
  font-size: 12.5px;
  color: var(--fg2);
  line-height: 1.7;
}

/* 登录表单复用 .form-grid，但必须单列并去掉重复内边距 */
.login-form.form-grid,
.login-form {
  grid-template-columns: 1fr;
  gap: 13px;
  padding: 0;
}

.login-form .form-row {
  gap: 7px;
  font-size: 11.5px;
  color: var(--fg3);
}

/* 一屏唯一的主操作，按规范用 56px 主运行按钮 */
.login-form .action-btn.primary,
.login-form.form-grid > .action-btn.primary {
  width: 100%;
  height: 56px;
  margin-top: 9px;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
}

/* ============================================================
   面板与区块头
   ============================================================ */
.panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line2);
  background: var(--panel);
}

.panel:has(.action-btn.primary),
.panel:has(.release-upload-form),
.license-create-panel,
.license-list-panel,
.hotfix-panel.license-list-panel,
.inline-admin-panel {
  border-top: 3px solid var(--accent);
}

.license-fill-panel {
  border-top: 3px solid var(--accent);
}

.form-panel {
  display: flex;
  flex-direction: column;
}

.section-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
}

/* 编号是 ::before，也是弹性子项；用 space-between 会把它甩到最左、
   和标题拉开一大截。改成左对齐 + 第一组 margin-right:auto，
   视觉结果和 space-between 一致，但编号始终贴着标题。 */
.section-header.split {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.section-header.split > *:first-child {
  margin-right: auto;
}

/* 一行塞不下时（标题 + 三个按钮 + 筛选区），换行后要有上下呼吸，
   否则 52px 的固定高度会把两行挤在一起 */
.section-header.split {
  padding-top: 10px;
  padding-bottom: 10px;
}

.section-header.sub-head {
  min-height: auto;
  padding: 13px 22px 0;
  border-bottom: none;
}

/* 区块编号 01–N（交付自查："编号 01–N 在界面上可见"）。
   用 CSS 计数器实现，不需要改任何 renderXxx 的 HTML。 */
.workspace-scroll {
  counter-reset: aiw-panel;
}

.panel > .section-header:not(.sub-head)::before {
  counter-increment: aiw-panel;
  content: counter(aiw-panel, decimal-leading-zero);
  flex: none;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--accent-text);
}

.section-header .icon {
  display: inline-flex;
  color: var(--fg2);
}

/* 编号已经承担了「这是第几块」的指示，线性图标是多出来的一层语言 */
.panel > .section-header .icon {
  display: none;
}

.section-header .title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--fg);
}

.title-with-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}

/* 区块头里的次级按钮按设计稿的 32px，而不是表单里的 42px */
.title-with-actions .neumo-btn,
.section-header .inline-actions .neumo-btn,
.section-header > .neumo-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--fg);
}

.soft-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--fg3);
  text-transform: uppercase;
  white-space: nowrap;
}

.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 13px;
  flex-wrap: wrap;
}

/* 设计稿里筛选区是区块头下面独立的一条（16px 22px + 上分隔线），
   不是挤在标题行右边。挤在一行时标题、按钮、下拉三种基线互相错开，
   截图里「授权列表」那一排就是这么歪的。 */
.section-header:has(.filter-bar) {
  padding-bottom: 0;
}

.section-header .filter-bar {
  flex: 1 0 100%;
  margin: 0 -22px;
  padding: 13px 22px;
  border-top: 1px solid var(--line);
}

/* 占位文字（客户名 / 用户组 / 联系方式 / 状态）不能被截掉 */
.filter-bar {
  flex-wrap: nowrap;
  gap: 13px;
}

.filter-bar .form-row {
  flex: 0 0 auto;
  width: 200px;
  gap: 6px;
  font-size: 11px;
  color: var(--fg3);
}

.filter-bar .form-row:has(input) {
  flex: 1 1 auto;
  max-width: 420px;
  width: auto;
}

.filter-bar .form-row > select,
.filter-bar .form-row > input {
  width: 100%;
}

.licenses-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.licenses-page--hotfix {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ============================================================
   表单
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  padding: 22px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  color: var(--fg2);
}

.form-row.wide {
  grid-column: 1 / -1;
}

/* 表单末尾直接作为栅格子项的按钮：与相邻按钮等高、置于单元格底部 */
.form-grid > button,
.form-grid > .action-btn,
.form-grid > .neumo-btn {
  align-self: end;
  height: 48px;
}

.form-grid > .action-btn.primary {
  height: 48px;
  padding: 0 26px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .16em;
}

input,
select,
textarea {
  height: 40px;
  border: 1px solid var(--line2);
  background: var(--bg);
  color: var(--fg);
  padding: 0 12px;
  outline: none;
  transition: border-color 120ms linear;
}

textarea {
  height: auto;
  padding: 10px 12px;
  line-height: 1.6;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--fg3);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

input[type="file"] {
  padding: 8px 12px;
}

/* 下拉三角 9×6：换掉浏览器自带的圆头箭头 */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'><path d='M0 0h9L4.5 6z' fill='%23798086'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 9px 6px;
}

select::-ms-expand {
  display: none;
}

.toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg2);
  cursor: pointer;
  transition: color 120ms linear, background-color 120ms linear, border-color 120ms linear;
}

.toggle-option.pressed,
.toggle-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

.toggle-option .ui-icon {
  color: currentColor;
}

.segment-control {
  display: inline-flex;
  border: 1px solid var(--accent);
}

.segment-control .toggle-option {
  flex: 1;
  justify-content: center;
  border: none;
  height: 38px;
}

.segment-control .toggle-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segment-control .toggle-option:has(input:checked)::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--ink);
  transform: rotate(45deg);
}

.compact-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.compact-field input,
.compact-field select {
  height: 40px;
}

.hotfix-group-name-field,
.hotfix-group-concurrency-field {
  min-width: 0;
}

/* ============================================================
   按钮
   ============================================================ */
.neumo-btn,
.action-btn,
.ops-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg2);
  white-space: nowrap;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: color 120ms linear, border-color 120ms linear, background-color 120ms linear, transform 120ms linear;
}

.neumo-btn:hover,
.action-btn:hover,
.ops-mini-btn:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.neumo-btn:active,
.action-btn:active,
.ops-mini-btn:active {
  transform: translateY(1px);
}

.neumo-btn {
  height: 42px;
  padding: 0 16px;
  font-size: 12.5px;
}

.action-btn {
  height: 42px;
  padding: 0 18px;
  font-size: 12.5px;
}

.action-btn.primary {
  height: 56px;
  padding: 0 32px;
  border: none;
  background: var(--accent);
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2em;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.action-btn.primary:hover {
  background: color-mix(in oklab, var(--accent) 84%, var(--ink));
  color: var(--ink);
}

.action-btn.full {
  width: 100%;
}

.ops-mini-btn {
  height: 30px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ops-mini-btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

.ops-mini-btn.primary:hover {
  background: color-mix(in oklab, var(--accent) 84%, var(--ink));
  color: var(--ink);
}

.ops-mini-btn.danger:hover,
.neumo-btn.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.ops-mini-btn.is-warn:hover {
  border-color: var(--warn);
  color: var(--warn);
}

.control-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg2);
  transition: color 120ms linear, border-color 120ms linear;
}

.control-btn:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

.text-action-btn {
  border: none;
  background: transparent;
  color: var(--fg2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color 120ms linear;
}

.text-action-btn:hover {
  color: var(--accent-text);
}

.inline-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* 表格行里的竖排按钮会把行撑到 74px，横排收紧回 44px 行高 */
.inline-actions.vertical {
  flex-direction: column;
  align-items: stretch;
}

td .inline-actions.vertical,
.table-wrap .inline-actions.vertical {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.inline-actions button,
.compact-actions button,
.inline-actions .neumo-btn,
.compact-actions .neumo-btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: color 120ms linear, border-color 120ms linear, background-color 120ms linear;
}

.inline-actions button:hover,
.compact-actions button:hover,
.inline-actions .neumo-btn:hover,
.compact-actions .neumo-btn:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.inline-actions button.primary,
.compact-actions button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

.inline-actions button.primary:hover,
.compact-actions button.primary:hover {
  background: color-mix(in oklab, var(--accent) 84%, var(--ink));
  color: var(--ink);
}

.inline-actions button.danger,
.inline-actions button.danger-text,
.neumo-btn.danger,
.neumo-btn.danger-text {
  color: var(--fg2);
}

.inline-actions button.danger:hover,
.inline-actions button.danger-text:hover,
.neumo-btn.danger:hover,
.neumo-btn.danger-text:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* 文案是「复制」，等宽 + .16em 会拉成「复 制」 */
.copy-chip {
  height: 28px;
  min-width: 64px;
  padding: 0 12px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg2);
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: .06em;
  transition: color 120ms linear, border-color 120ms linear;
}

.copy-chip:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

.inline-chip-button {
  border: none;
  background: transparent;
  color: var(--fg);
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  transition: color 120ms linear;
}

.inline-chip-button:hover {
  color: var(--accent-text);
}

.action-grid {
  display: flex;
  gap: 9px;
}

.action-grid--three {
  flex-wrap: wrap;
}

.action-grid button {
  height: 28px;
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg2);
  font-size: 11.5px;
  white-space: nowrap;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: color 120ms linear, border-color 120ms linear;
}

.action-grid button:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

.action-grid button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.action-grid button.danger-text,
.delete-record-btn {
  color: var(--fg2);
}

.action-grid button.danger-text:hover,
.delete-record-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.action-grid--module {
  display: flex;
  gap: 9px;
}

/* 授权操作是四个按钮，一行铺开每个只剩四十来像素，
   中文标签直接被挤没。改成两列两行的方阵。 */
.action-grid--license {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 9px;
}

.action-grid--license button,
.action-grid--module button {
  height: 28px;
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg2);
  font-size: 11.5px;
  white-space: nowrap;
  transition: color 120ms linear, border-color 120ms linear;
}

.action-grid--license button:hover,
.action-grid--module button:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

.checkbox {
  position: relative;
}

.license-actions-grid {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.license-actions-grid .ops-mini-btn {
  flex: 1;
  min-width: 76px;
}

.delete-record-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line2);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--fg2);
  text-transform: uppercase;
}

.badge.danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* ============================================================
   表格
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  width: 100%;
}

.table-wrap--scroll {
  overflow: auto;
}

.compact {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

/* 表头 36px / --panel2 底。设计稿的表头是英文等宽（CUSTOMER / PRODUCT），
   本后台的表头是中文，套等宽 + .16em 会被拉成「授 权 状 态」，
   所以中文表头改用界面字体 11px + .06em，等宽只留给纯拉丁表头。 */
thead th {
  height: 36px;
  padding: 0 13px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line2);
  color: var(--fg3);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-align: left;
  white-space: nowrap;
}

tbody tr {
  height: 44px;
  border-bottom: 1px solid var(--line);
  transition: background-color 120ms linear;
}

tbody tr:hover {
  background: var(--panel2);
}

td {
  padding: 0 13px;
  color: var(--fg2);
  vertical-align: middle;
}

/* 表格首尾列与面板标题（padding 22）对齐，否则整张表看着往里缩了一截 */
thead th:first-child,
tbody td:first-child {
  padding-left: 22px;
}

thead th:last-child,
tbody td:last-child {
  padding-right: 22px;
}

/* 行内两行文案（主值 + subtle）统一节奏，避免每张表各写一套 */
td > .subtle,
td > .mono.subtle {
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}

tbody tr:last-child {
  border-bottom: none;
}

td strong {
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 700;
}

td .mono {
  font-size: 11px;
}

.table-wrap--scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.compact-table-wrap {
  overflow-x: auto;
}

.compact-table td,
.compact-table th {
  white-space: nowrap;
}

/* 授权表原来是 auto 布局：列宽跟着最长的客户名走，
   一个长名字就能把整张表顶出横向滚动条，其它页面的列位置也跟着变。
   改成 fixed + 定比列宽，长文本省略号截断，列位置固定不动。 */
.license-table--hotfix {
  table-layout: fixed;
  min-width: 1024px;
}

/* 七列：客户 / AI产品 / Price / 激活码 / 授权状态 / 最近上线 / 授权操作
   「授权状态」要装下「到期：2036/8/5 15:28:12」整行（等宽 11px ≈ 150px），
   给够 18%，否则 nowrap 会溢出压到「最近上线」上。 */
.license-table--hotfix thead th:nth-child(1),
.license-table--hotfix tbody td:nth-child(1) { width: 16%; }

.license-table--hotfix thead th:nth-child(2),
.license-table--hotfix tbody td:nth-child(2) { width: 15%; }

.license-table--hotfix thead th:nth-child(3),
.license-table--hotfix tbody td:nth-child(3) { width: 7%; }

.license-table--hotfix thead th:nth-child(4),
.license-table--hotfix tbody td:nth-child(4) { width: 8%; }

.license-table--hotfix thead th:nth-child(5),
.license-table--hotfix tbody td:nth-child(5) { width: 18%; }

.license-table--hotfix thead th:nth-child(6),
.license-table--hotfix tbody td:nth-child(6) { width: 14%; }

.license-table--hotfix thead th:nth-child(7),
.license-table--hotfix tbody td:nth-child(7) { width: 22%; }

/* 状态列的「到期」是 nowrap 的等宽文本，超了要截断而不是压到下一列 */
.license-table--hotfix .status-stack {
  min-width: 0;
}

.license-table--hotfix .status-stack > .subtle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.license-table--hotfix tbody td > strong,
.license-table--hotfix tbody td > .subtle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 操作列是两行按钮方阵，44px 的默认行高装不下 */
.license-table--hotfix tbody tr {
  height: 68px;
}

/* 最近上线：日期一行、时刻一行 */
.last-seen-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.last-seen-cell strong,
.last-seen-cell .subtle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.last-seen-cell strong {
  color: var(--fg);
  font-weight: 500;
}

.last-seen-cell .subtle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
}

.license-table-wrap {
  overflow-x: auto;
}

.table-stack {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   状态标记：菱形 + 等宽大写
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--fg2);
  text-transform: uppercase;
  white-space: nowrap;
}

.pill-mark {
  width: 7px;
  height: 7px;
  flex: none;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.pill.active,
.pill.published,
.pill.enabled,
.pill.success,
.pill.running,
.pill.pending {
  color: var(--accent-text);
}

.pill.active .pill-mark,
.pill.published .pill-mark,
.pill.enabled .pill-mark,
.pill.success .pill-mark,
.pill.running .pill-mark,
.pill.pending .pill-mark {
  background: var(--accent);
  border-color: var(--accent);
}

.pill.suspended,
.pill.expired,
.pill.revoked,
.pill.disabled,
.pill.inactive,
.pill.error,
.pill.failed,
.pill.cancelled,
.pill.canceled,
.pill.usage_exhausted,
.pill.expiry_missing,
.pill.not_entitled,
.pill.not_started {
  color: var(--danger);
}

.pill.suspended .pill-mark,
.pill.expired .pill-mark,
.pill.revoked .pill-mark,
.pill.disabled .pill-mark,
.pill.inactive .pill-mark,
.pill.error .pill-mark,
.pill.failed .pill-mark,
.pill.cancelled .pill-mark,
.pill.canceled .pill-mark,
.pill.usage_exhausted .pill-mark,
.pill.expiry_missing .pill-mark,
.pill.not_entitled .pill-mark,
.pill.not_started .pill-mark {
  background: transparent;
  border-color: var(--danger);
}

.status-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* 到期时间是时间码：按规范走等宽 10px / .12em，
   顺便让「STATUS / EXPIRY」这一列在定宽下装得下完整日期 */
.status-stack .subtle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.creator-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   空态 / 斜纹
   ============================================================ */
.empty-state {
  position: relative;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 26px 18px;
  border: 1px solid var(--line2);
  background: var(--hatch);
  text-align: center;
}

/* 设计稿里空态文案压在一块 --panel 实底上，不是直接躺在斜纹上（会读不清） */
.empty-state strong,
.empty-state span {
  display: block;
  min-width: min(280px, 100%);
  padding: 5px 18px;
  background: var(--panel);
}

.empty-state strong {
  padding-top: 13px;
}

.empty-state span {
  padding-bottom: 13px;
}

.empty-state::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-left: 1px solid var(--line2);
  border-top: 1px solid var(--line2);
}

.empty-state::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  border-right: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}

/* 标题是中文，等宽 10px + .2em 会读不清；中文用界面字体，
   英文标记交给 ::before 的等宽标签。 */
.empty-state strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg2);
}

.empty-state strong::before {
  content: "NO DATA";
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--fg3);
}

.empty-state span {
  font-size: 12.5px;
  color: var(--fg2);
}

.module-editor-empty {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line2);
  background: var(--hatch);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--fg3);
  text-transform: uppercase;
}

/* ============================================================
   通知
   ============================================================ */
.notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line2);
  border-left: 3px solid var(--accent);
  background: var(--panel2);
  font-size: 12.5px;
  color: var(--fg);
}

.notice span {
  width: 16px;
  height: 16px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-text);
}

.notice.error {
  border-left-color: var(--danger);
}

.notice.error span {
  color: var(--danger);
}

/* ============================================================
   资源卡片 / 压力条
   ============================================================ */
/* 和顶部 76px 读数条同一套语言：等分格 + 1px 分隔线，
   不再是四个带边框、带内边距的独立卡片（那是拟物残留） */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 18px;
  border: none;
  border-right: 1px solid var(--line);
  background: transparent;
  min-width: 0;
}

.stat-card:last-child {
  border-right: none;
}

.stat-card span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--fg3);
  text-transform: uppercase;
}

.stat-card strong {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--fg3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pressure-meter {
  height: 3px;
  margin: 22px;
  background: var(--line);
  overflow: hidden;
}

.pressure-meter span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 13px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--panel2);
}

.stat-icon {
  display: inline-flex;
  color: var(--fg2);
}

.stat .subtle {
  font-size: 11px;
}

.stat strong {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--fg);
}

.stat em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--fg3);
  text-transform: uppercase;
}

/* ============================================================
   监视条（兼容旧 monitor-* 结构）
   ============================================================ */
.monitor-panel {
  overflow: hidden;
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  align-items: stretch;
}

.monitor-title {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 13px 18px;
  border-right: 1px solid var(--line);
}

.monitor-title strong {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--accent-text);
  line-height: 1.2;
}

.monitor-title span {
  color: var(--fg3);
  font-size: 9.5px;
}

.monitor-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 13px 18px;
  border-right: 1px solid var(--line);
  color: var(--fg2);
}

.monitor-chip.is-green,
.monitor-chip.is-orange,
.monitor-chip.is-violet {
  color: var(--fg2);
}

.monitor-chip span {
  display: grid;
  min-width: 0;
}

.monitor-chip b,
.monitor-chip strong,
.monitor-chip em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-chip b {
  color: var(--fg3);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  font-weight: 500;
  line-height: 1.2;
}

.monitor-chip strong {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
}

.monitor-chip em {
  color: var(--fg3);
  font-size: 10px;
  font-style: normal;
  font-family: var(--font-mono);
  letter-spacing: .12em;
}

.monitor-refresh {
  height: 32px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 12px;
}

/* ============================================================
   模块管理
   ============================================================ */
.module-management-wrap {
  overflow-x: auto;
}

.creator-module-table,
.creator-module-inline-table,
.module-table,
.module-table-v2 {
  width: 100%;
}

/* 模块表是全站唯一的十列可编辑表。table-layout:fixed 下不给每列定宽，
   浏览器会把十列平均分成 117px：「下载」「排序」白占一半宽度，
   「模块名」「模块ID」「说明」全被截断——截图里的「列表体积错乱」就是这个。
   下面按内容实际需要分配百分比：1024px 起（1440 窗口不出横向滚动条），
   屏幕更宽时按同一比例一起长。 */
.creator-module-table,
.creator-module-inline-table {
  min-width: 1024px;
  table-layout: fixed;
}

/* 列宽已含内边距（全局 border-box），所以首尾列照样对齐面板的 22px，
   不会把表格总宽顶出滚动条 */
.creator-module-inline-table thead th,
.creator-module-inline-table tbody td {
  padding-left: 9px;
  padding-right: 9px;
}

.creator-module-inline-table thead th:first-child,
.creator-module-inline-table tbody td:first-child {
  padding-left: 22px;
}

.creator-module-inline-table thead th:last-child,
.creator-module-inline-table tbody td:last-child {
  padding-right: 22px;
}

.creator-module-inline-table thead th:nth-child(1),
.creator-module-inline-table tbody tr:not(.module-group-heading):not(.module-expanded-row) td:nth-child(1) {
  width: 13.1%;
}

.creator-module-inline-table thead th:nth-child(2),
.creator-module-inline-table tbody tr:not(.module-group-heading):not(.module-expanded-row) td:nth-child(2) {
  width: 12.5%;
}

.creator-module-inline-table thead th:nth-child(3),
.creator-module-inline-table tbody tr:not(.module-group-heading):not(.module-expanded-row) td:nth-child(3) {
  width: 10.5%;
}

.creator-module-inline-table thead th:nth-child(4),
.creator-module-inline-table tbody tr:not(.module-group-heading):not(.module-expanded-row) td:nth-child(4) {
  width: 14.8%;
}

.creator-module-inline-table thead th:nth-child(5),
.creator-module-inline-table tbody tr:not(.module-group-heading):not(.module-expanded-row) td:nth-child(5) {
  width: 5.3%;
}

.creator-module-inline-table thead th:nth-child(6),
.creator-module-inline-table tbody tr:not(.module-group-heading):not(.module-expanded-row) td:nth-child(6) {
  width: 7.6%;
}

.creator-module-inline-table thead th:nth-child(7),
.creator-module-inline-table tbody tr:not(.module-group-heading):not(.module-expanded-row) td:nth-child(7) {
  width: 10.6%;
}

.creator-module-inline-table thead th:nth-child(8),
.creator-module-inline-table tbody tr:not(.module-group-heading):not(.module-expanded-row) td:nth-child(8) {
  width: 9.4%;
}

.creator-module-inline-table thead th:nth-child(9),
.creator-module-inline-table tbody tr:not(.module-group-heading):not(.module-expanded-row) td:nth-child(9) {
  width: 10.9%;
}

.creator-module-inline-table thead th:nth-child(10),
.creator-module-inline-table tbody tr:not(.module-group-heading):not(.module-expanded-row) td:nth-child(10) {
  width: 5.3%;
}

/* 「下载」「排序」是窄列，标题右对齐会更贴内容 */
.creator-module-inline-table tbody td:nth-child(5),
.creator-module-inline-table tbody td:nth-child(10) {
  white-space: nowrap;
}

.workflow-json-col {
  width: 164px;
}

.module-workflow-cell {
  min-width: 0;
}

.module-workflow-field {
  min-width: 0;
}

.module-model-id,
.module-description-cell {
  min-width: 130px;
}

.module-admin-actions {
  gap: 9px;
}

.module-name-chip {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-name-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.module-name-stack strong {
  color: var(--fg);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 组标题是分隔带，不是数据行：不参与 hover，不跟着行高走 */
.module-group-heading td,
.module-group-heading:hover td {
  background: var(--panel2);
  padding: 0;
}

.module-group-heading {
  height: 36px;
  border-bottom: none;
}

.module-group-heading-inner {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 36px;
  padding: 0 16px;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}

/* 3px 主色竖条 = 设计稿里区块头的引导标记 */
.module-group-heading-inner::before {
  content: "";
  width: 3px;
  height: 14px;
  flex: none;
  background: var(--accent);
}

.module-group-heading-inner strong {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--fg);
}

.module-group-heading-inner small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--fg3);
  text-transform: uppercase;
}

/* 第一条组标题紧贴表头，不要再叠一条线 */
.creator-module-inline-table tbody tr:first-child .module-group-heading-inner {
  border-top: none;
}

.module-row-actions {
  white-space: nowrap;
}

.module-row-action-stack {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
}

.module-row-action-stack .neumo-btn {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
}

.module-edit-btn,
.module-delete-btn,
.module-download-btn,
.module-drag-handle {
  height: 28px;
  padding: 0 9px;
  font-size: 11.5px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* 「下载」是中文，等宽 + .12em 会被拉成「下 载」 */
.module-download-btn {
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0;
}

/* 「排序」列只需要一个抓取点。保留 draggable 的按钮和文案（无障碍/事件不变），
   视觉上换成三条 1px 横线的抓手，把 117px 的列收到 54px。 */
.module-drag-handle {
  cursor: grab;
  width: 30px;
  padding: 0;
  font-size: 0;
  letter-spacing: 0;
  position: relative;
}

.module-drag-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.module-drag-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1px;
  transform: translate(-50%, -50%);
  background: currentColor;
}

.module-drag-handle:active {
  cursor: grabbing;
}

/* 已配置工作流时这里是「按钮包着文件名」。span 限了 180px，但外层
   .neumo-btn 还有 padding:0 16px + nowrap，总宽 212px 会压到「下载」列上。
   表格是 table-layout:fixed，必须整体收进单元格宽度内。 */
.module-workflow-file-button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 30px;
  padding: 0 9px;
  justify-content: flex-start;
  border-color: transparent;
  color: var(--fg2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  cursor: pointer;
  clip-path: none;
}

.module-workflow-file-button:hover {
  border-color: var(--line2);
  color: var(--accent-text);
}

.module-workflow-file-button span {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* API 模块在「运行模式」「工作流 JSON」两格都是这个块。
   撑满整格会变成两大块主色实底，一屏出现十几次——主色就不再表示「可操作」了。
   收成贴合文字的小标记。 */
.module-api-chip,
.module-api-mode-pill {
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.workflow-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line2);
  cursor: pointer;
}

.workflow-chip span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fg2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-chip em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fg3);
}

.module-api-chip,
.module-api-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 500;
  text-transform: uppercase;
}

/* 菱形 = 状态标记：API 模块由接口执行，1px 描边表示「不走工作流」 */
.module-api-chip::before,
.module-api-mode-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border: 1px solid var(--fg3);
  transform: rotate(45deg);
}

.module-workflow-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--fg3);
  text-transform: uppercase;
}

.module-expanded-row > td {
  padding: 0;
}

.module-expanded-editor {
  padding: 22px;
  background: var(--panel2);
  border-top: 1px solid var(--line);
}

.module-expanded-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
  margin-bottom: 13px;
}

.module-expanded-head > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.module-expanded-head strong,
.module-submodule-head label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--fg);
}

.module-expanded-head span,
.module-editor-subtitle {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--fg3);
  text-transform: uppercase;
}

.module-submodule-editor {
  margin-bottom: 13px;
  padding: 13px;
  border: 1px solid var(--line2);
  background: var(--bg);
}

.module-submodule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  margin-bottom: 13px;
}

.module-submodule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 13px;
}

.module-submodule-editor .module-submodule-grid,
.module-node-map-table,
.module-override-table,
.module-add-override {
  margin-top: 13px;
}

.module-node-map-table,
.module-override-table {
  min-width: 720px;
}

.module-node-map-table td,
.module-override-table td {
  padding: 0 10px;
}

.module-node-map-table input,
.module-node-map-table select,
.module-override-table input,
.module-override-table select {
  height: 32px;
  width: 100%;
}

.module-fixed-boolean {
  height: 32px;
}

.module-value-hint {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--fg3);
  text-transform: uppercase;
}

.module-add-override {
  height: 32px;
}

.module-input-editor {
  border: 1px solid var(--line2);
  background: var(--bg);
}

.module-input-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
}

.module-input-editor-head strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg);
}

.module-input-editor .table-wrap {
  overflow-x: auto;
}

.module-input-editor table {
  min-width: 980px;
}

.module-input-editor tbody tr {
  height: 44px;
}

.module-input-editor td > input,
.module-input-editor td > select,
.module-field-cell > select,
.module-limit-controls {
  height: 32px;
  width: 100%;
}

.module-field-cell,
.module-limit-cell {
  min-width: 0;
}

.module-limit-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.module-limit-controls input,
.module-limit-controls select {
  height: 32px;
}

.module-limit-input {
  width: 90px;
}

.module-limit-unit {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--fg3);
  text-transform: uppercase;
}

.module-inline-form,
.account-inline-form {
  background: var(--panel2);
}

.inline-editor-row > td {
  padding: 0;
}

.module-editor-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  padding: 22px;
}

/* 表格内的可编辑控件。
   每格都画一个实边框时，一屏 130 个方框互相干扰，行的节奏彻底看不出来。
   冷几何的做法：静止态只有文字，hover 才出 1px 描边，focus 才上底色 + 主色边。
   ——「可操作」仍然只用主色表示，不靠常驻边框。 */
.module-inline-input,
.module-inline-select,
.module-group-select,
.module-submodule-editor input,
.module-submodule-editor select,
.mini-select,
.customer-group-select,
.license-group-select {
  height: 32px;
  /* 表格是 table-layout:fixed，输入框保留浏览器默认宽度会压到相邻列上 */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--fg);
  padding: 0 9px;
  outline: none;
  text-overflow: ellipsis;
  transition: border-color 120ms linear, background-color 120ms linear;
}

.module-inline-select,
.module-group-select,
.module-submodule-editor select,
.mini-select,
.customer-group-select,
.license-group-select {
  padding-right: 22px;
  background-position: right 7px center;
}

.module-inline-input:hover,
.module-inline-select:hover,
.module-group-select:hover,
.mini-select:hover,
.customer-group-select:hover,
.license-group-select:hover {
  border-color: var(--line2);
}

.module-inline-input:focus,
.module-inline-select:focus,
.module-group-select:focus,
.module-submodule-editor input:focus,
.module-submodule-editor select:focus,
.mini-select:focus,
.customer-group-select:focus,
.license-group-select:focus {
  border-color: var(--accent);
  background-color: var(--bg);
}

/* 展开的节点编辑器不是列表，是表单，保留常驻边框 */
.module-submodule-editor input,
.module-submodule-editor select {
  border-color: var(--line2);
  background-color: var(--bg);
}

/* 完全无边框会让人看不出哪几列能改。留一条 1px 底线当「可编辑」的标记：
   十列里只有这几列有底线，行的节奏不受影响，也不会退回一屏方框。
   底线常驻，不分空值满值——只有空值才画线会让同一列忽有忽无。 */
.creator-module-inline-table .module-inline-input,
.creator-module-inline-table .module-inline-select,
.creator-module-inline-table .module-group-select {
  border-bottom-color: var(--line);
}

.creator-module-inline-table .module-inline-input:hover,
.creator-module-inline-table .module-inline-select:hover,
.creator-module-inline-table .module-group-select:hover {
  border-color: var(--line2);
}

.creator-module-inline-table .module-inline-input:focus,
.creator-module-inline-table .module-inline-select:focus,
.creator-module-inline-table .module-group-select:focus {
  border-color: var(--accent);
}

.module-group-cell,
.module-limit-cell {
  padding-right: 13px;
}

.module-editing-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--warn);
  background: var(--accent-12);
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.module-editing-banner[hidden] {
  display: none;
}

.module-editing-banner .editing-banner-text {
  flex: 1;
}

.module-setting-table-wrap {
  overflow-x: auto;
  padding: 0 22px 22px;
}

.module-setting-table {
  min-width: 1100px;
}

.module-setting-table input,
.module-setting-table select {
  height: 32px;
  width: 100%;
}

.module-setting-table td {
  padding: 6px 10px;
}

.module-setting-muted {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--fg3);
  text-transform: uppercase;
}

.module-setting-help {
  font-size: 11.5px;
  color: var(--fg2);
}

.workflow-download-cell {
  white-space: nowrap;
}

.workflow-download-btn {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color 120ms linear, border-color 120ms linear;
}

.workflow-download-btn:hover:not(:disabled) {
  color: var(--accent-text);
  border-color: var(--accent);
}

/* ============================================================
   造物机：任务 / 每日用量
   ============================================================ */
.task-id-stack,
.task-module-cell,
.task-status-cell,
.task-time-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.task-id-stack strong,
.task-module-cell strong,
.task-customer-name {
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 700;
}

.task-id-stack .mono,
.task-module-cell span,
.task-time-cell em,
.task-time-cell span,
.task-customer-name + .subtle {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--fg3);
  text-transform: uppercase;
}

.task-account-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--fg2);
  text-transform: uppercase;
  white-space: nowrap;
}

.creator-task-table td {
  padding: 0 13px;
}

.creator-task-row td {
  padding: 0 13px;
}

.account-pool-cell {
  min-width: 120px;
  white-space: nowrap;
}

.creator-usage-panel {
  margin-top: 0;
}

.creator-usage-head {
  min-height: 44px;
}

.creator-usage-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* 标记在 HTML 里排在标题前面，渲染出来是「05 [日期] 每日时长」，
   和其它面板的「编号 标题 控件」不是一个读法。用 order 摆正，不动 HTML。 */
.creator-usage-title .title {
  order: 1;
}

.creator-usage-title .daily-date-picker {
  order: 2;
  margin-left: 4px;
}

.creator-usage-clear {
  height: 30px;
  padding: 0 12px;
  font-size: 11.5px;
}

.daily-date-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line2);
  color: var(--fg2);
}

.daily-date-picker .ui-icon {
  width: 14px;
  height: 14px;
}

.daily-date-picker input {
  height: 28px;
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fg);
  text-transform: uppercase;
}

/* 「每日时长」和「客户生成任务」一样收进内置滚动框，表头 sticky */
.creator-usage-scroll {
  max-height: 420px;
  overflow: auto;
}

.creator-usage-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.creator-usage-table {
  min-width: 760px;
}

.creator-usage-day {
  cursor: pointer;
}

.creator-usage-day td:first-child strong {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
}

.creator-usage-day td:first-child span {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--fg3);
  text-transform: uppercase;
}

.creator-usage-day.is-selected td,
.creator-usage-day.is-expanded td {
  background: var(--accent-12);
}

.creator-usage-detail-row td {
  background: var(--panel2);
  border-top: 1px solid var(--line);
}

.creator-usage-detail-row .creator-usage-detail-spacer {
  width: 34px;
}

.creator-usage-detail-row strong {
  color: var(--fg);
}

.daily-usage-wrap {
  padding: 0 22px 22px;
}

.daily-usage-table {
  min-width: 680px;
}

.daily-usage-row {
  cursor: pointer;
}

.daily-usage-row.is-open td,
.daily-usage-row:hover td {
  background: var(--accent-12);
}

.daily-usage-detail-row td {
  background: var(--panel2);
}

.daily-usage-detail-row .daily-detail-spacer {
  width: 34px;
}

.daily-detail-name {
  color: var(--fg);
  font-weight: 700;
}

.daily-expand-chip {
  height: 26px;
  margin-right: 10px;
  padding: 0 10px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg2);
  font-size: 11.5px;
  transition: color 120ms linear, border-color 120ms linear;
}

.daily-expand-chip:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

.daily-current-customer {
  color: var(--fg);
}

.daily-current-customer strong {
  font-weight: 700;
}

/* ============================================================
   授权页
   ============================================================ */
/* 1080 比 1440 窗口的工作区（1036）还宽，等于永远挂一条横向滚动条。
   授权表的定比列宽在「表格」一节，这里只给下限。 */
.license-table,
.license-table--hotfix {
  min-width: 1024px;
}

.license-table td {
  padding: 0 13px;
}

.license-table td > strong,
.license-table .device-line strong {
  color: var(--fg);
}

.license-key-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.license-key-box .mono {
  font-size: 10.5px;
  color: var(--fg2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.license-key-box.legacy {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.license-key-box.legacy span {
  font-size: 11.5px;
  color: var(--fg3);
}

.license-key-box.legacy small {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--fg3);
  text-transform: uppercase;
}

.license-copy-btn {
  flex: none;
}

.license-create-form,
.inline-create-form {
  background: var(--panel2);
}

/* 激活时长：数值 + 单位并成一个控件，中间对半分。
   左半边去掉右边框，分隔线由右半边的左边框给，免得中缝出现 2px 双线。 */
.duration-combo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
}

.duration-combo > input,
.duration-combo > select {
  width: 100%;
  min-width: 0;
}

.duration-combo > input {
  border-right: none;
}

.license-form-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 4px;
}

.create-license-group-card {
  border: 1px solid var(--line2);
  background: var(--bg);
  padding: 13px;
}

.create-license-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.create-license-group-head strong {
  font-size: 12.5px;
  color: var(--fg);
}

.group-quota-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.group-quota-preview span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--fg2);
}

.inline-group-create {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
}

.inline-group-quota-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 9px;
}

.inline-group-quota-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid var(--line);
}

.inline-group-quota-item span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--fg3);
  text-transform: uppercase;
}

.inline-group-quota-item input {
  height: 30px;
}

.license-feature-picker {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 13px;
  border: 1px solid var(--line2);
  background: var(--bg);
}

.license-feature-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
}

.license-feature-picker-head strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg);
}

.license-feature-picker-head span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--fg3);
  text-transform: uppercase;
}

.license-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 13px;
}

.license-feature-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  background: var(--panel2);
}

.license-feature-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.license-feature-main input[type="checkbox"],
.license-feature-check {
  width: 14px;
  height: 14px;
  flex: none;
  margin: 2px 0 0;
}

.license-feature-main span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.license-feature-main strong {
  font-size: 12.5px;
  color: var(--fg);
}

.license-feature-main em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--fg3);
  text-transform: uppercase;
}

.license-feature-duration {
  display: flex;
  align-items: center;
  gap: 7px;
}

.license-feature-duration span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--fg3);
  text-transform: uppercase;
}

.license-feature-duration input {
  width: 70px;
  height: 30px;
}

.license-feature-duration select {
  height: 30px;
  flex: 1;
  min-width: 0;
}

/* hotfix 模块选择器变体 */
.license-module-picker .license-feature-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

/* 该结构里原生 checkbox 只负责取值，方块由 .license-feature-checkmark 画，
   两者都可见会出现两个勾选框，所以把原生控件收起来（仍可点击 / 可聚焦）。 */
.license-feature-toggle .license-feature-check {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.license-feature-checkmark {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  border: 1px solid var(--line2);
  background: var(--bg);
  transition: background-color 120ms linear, border-color 120ms linear;
}

.license-feature-toggle {
  position: relative;
}

.license-feature-check:focus-visible + .license-feature-checkmark {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.license-feature-check:checked + .license-feature-checkmark {
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}

/* 对勾不在冷几何的形状表里。选中态用规范里唯一的状态标记：实底菱形。 */
.license-feature-check:checked + .license-feature-checkmark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--ink);
  transform: rotate(45deg);
}

.license-feature-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.license-feature-title strong {
  font-size: 12.5px;
  color: var(--fg);
}

.license-feature-title em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--fg3);
  text-transform: uppercase;
}

/* 用户组面板 */
.customer-group-panel,
.hotfix-customer-group-panel {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.customer-group-form,
.hotfix-group-form {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 13px;
}

.customer-group-quota-grid,
.hotfix-group-quota-grid,
.inline-group-quota-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 9px;
}

.customer-group-quota-item,
.hotfix-group-quota-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid var(--line);
}

.customer-group-quota-item span,
.hotfix-group-quota-item span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.customer-group-quota-item strong,
.hotfix-group-quota-item strong {
  font-size: 11.5px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-group-quota-item em,
.hotfix-group-quota-item em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fg3);
  text-transform: uppercase;
}

.customer-group-quota-item input,
.hotfix-group-quota-item input {
  height: 30px;
}

.customer-group-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px;
  border: 1px solid var(--line);
}

.customer-group-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--fg);
  text-align: left;
  transition: border-color 120ms linear;
}

.customer-group-chip:hover,
.customer-group-chip.is-active {
  border-color: var(--accent);
}

.customer-group-chip strong {
  font-size: 12.5px;
  color: var(--fg);
}

.customer-group-chip span,
.customer-group-chip em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--fg3);
}

.hotfix-group-panel-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hotfix-group-panel-head strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--fg);
}

.hotfix-group-panel-head span {
  font-size: 12.5px;
  color: var(--fg2);
}

.hotfix-group-side {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.hotfix-group-actions {
  gap: 9px;
}

.hotfix-group-existing {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px;
  border: 1px solid var(--line);
}

.hotfix-group-existing > strong {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--fg3);
  text-transform: uppercase;
}

.hotfix-group-existing > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hotfix-group-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid var(--line2);
  background: transparent;
  text-align: left;
  transition: border-color 120ms linear;
}

.hotfix-group-chip:hover,
.hotfix-group-chip.is-active {
  border-color: var(--accent);
}

.hotfix-group-chip b {
  font-size: 12.5px;
  color: var(--fg);
}

.hotfix-group-chip em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--fg3);
}

.hotfix-group-quota-block {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.hotfix-group-quota-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hotfix-group-quota-head strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
}

.hotfix-group-quota-head span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--fg3);
  text-transform: uppercase;
}

/* 管理员选择面板 */
.inline-admin-panel {
  margin: 0 22px 22px;
  padding: 13px;
  background: var(--panel2);
}

.inline-admin-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 13px;
}

.inline-admin-head strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
}

.inline-admin-head span {
  font-size: 11.5px;
  color: var(--fg2);
}

.inline-admin-list,
.admin-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 9px;
}

.inline-admin-item,
.choice-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: var(--panel2);
  cursor: pointer;
}

.inline-admin-item input,
.choice-option input {
  margin: 2px 0 0;
}

.inline-admin-item span,
.choice-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.inline-admin-item strong,
.choice-copy strong {
  font-size: 12px;
  color: var(--fg);
}

.inline-admin-item em,
.choice-copy em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--fg3);
}

.choice-option.selected {
  border-color: var(--accent);
}

.choice-control {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  border: 1px solid var(--line2);
  background: var(--bg);
}

.choice-option.selected .choice-control {
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}

.choice-option.selected .choice-control::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

.choice-duration {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

.choice-duration span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--fg3);
  text-transform: uppercase;
}

.choice-duration input {
  width: 70px;
  height: 30px;
}

.choice-duration select {
  height: 30px;
  flex: 1;
  min-width: 0;
}

.admin-choice-panel {
  border-top: 3px solid var(--accent);
}

/* ============================================================
   版本发布
   ============================================================ */
.release-upload-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 22px;
}

.release-upload-form .form-row {
  gap: 7px;
}

/* 只作用于字段标签本身。写成后代选择器会连 .segment-control 里的
   .toggle-option（也是 label）一起染成 --fg2，选中态的 --ink 就被盖掉，
   「稳定版 / 完整包」会变成主色底上的灰字。 */
.release-upload-form .form-row > label {
  color: var(--fg2);
  font-size: 12.5px;
}

.release-file-row,
.release-progress-row {
  grid-column: 1 / -1;
}

.file-drop-zone {
  position: relative;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line2);
  background: var(--hatch);
  cursor: pointer;
  transition: border-color 120ms linear;
}

.file-drop-zone::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-left: 1px solid var(--line2);
  border-top: 1px solid var(--line2);
}

.file-drop-zone::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  border-right: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}

.file-drop-zone:hover {
  border-color: var(--accent);
}

.file-drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* 文案是中文（点击或拖拽选择 .zip 文件），等宽 .2em 会拉散；
   英文标记交给 ::before 的等宽标签，和空态三件套同一套写法 */
.file-drop-text {
  pointer-events: none;
  min-width: min(280px, 100%);
  padding: 13px 22px;
  background: var(--panel);
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--fg2);
  text-align: center;
}

.file-drop-text::before {
  content: "NO PACKAGE";
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--fg3);
}

/* 选好文件后就不是空态了：斜纹撤掉，标记换成主色 PACKAGE */
.file-drop-zone.has-file {
  background: none;
  background-color: var(--bg);
  border-color: var(--accent);
}

.file-drop-zone.has-file .file-drop-text {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
}

.file-drop-zone.has-file .file-drop-text::before {
  content: "PACKAGE";
  color: var(--accent-text);
}

.progress-bar-wrap {
  height: 4px;
  background: var(--line);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--accent);
}

.release-submit-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 22px;
  min-height: 80px;
  border-top: 1px solid var(--line);
  background: var(--panel2);
  margin: 0 -22px -22px;
}

/* 强制更新 / 立即发布 是两个互不相关的开关，不是单选分段器：
   拆成独立切角开关，选中用 20% 主色底 + 主色字，把主色实底留给「上传并发布」。 */
.release-flags.segment-control {
  display: flex;
  gap: 9px;
  border: none;
}

.release-flags .toggle-option {
  flex: none;
  height: 42px;
  padding: 0 16px;
  justify-content: flex-start;
  white-space: nowrap;
  border: 1px solid var(--line2);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.release-flags .toggle-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-20);
  color: var(--accent-text);
  font-weight: 700;
}

.release-flags .toggle-option:has(input:checked)::before {
  background: var(--accent);
}

.release-submit-bar .action-btn {
  margin-left: auto;
}

.release-row-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.release-channel-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.release-channel-stack span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fg2);
  text-transform: uppercase;
}

.release-table {
  min-width: 900px;
}

.release-diff {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--line);
  background: var(--panel2);
}

.release-diff-tags,
.release-diff-files {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.release-diff-tags span,
.release-diff-files span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--fg2);
}

/* ============================================================
   功能授权 / 设置 / 设备
   ============================================================ */
.feature-table {
  min-width: 920px;
}

.feature-table input,
.feature-table select {
  height: 32px;
  width: 100%;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}

.settings-list,
.endpoint-list {
  display: flex;
  flex-direction: column;
  padding: 13px 22px 22px;
}

.setting-item,
.endpoint-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}

.setting-item span {
  color: var(--fg2);
}

.setting-item strong {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.endpoint-list span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--fg2);
}

.device-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 13px;
  padding: 13px 22px 22px;
}

.device-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  background: var(--panel2);
}

.device-title strong {
  font-size: 12.5px;
  color: var(--fg);
}

.device-meta {
  font-size: 11.5px;
  color: var(--fg3);
}

.fixed-device-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid var(--warn);
  background: var(--panel2);
}

.fixed-device-note strong {
  font-size: 12.5px;
  color: var(--warn);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 13px;
}

.form-actions button.primary {
  height: 56px;
  padding: 0 32px;
  border: none;
  background: var(--accent);
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2em;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.hotfix-panel {
  display: flex;
  flex-direction: column;
}

.hotfix-head {
  flex-wrap: wrap;
}

.hotfix-group-standalone-panel {
  border-top: 3px solid var(--accent);
}

.hotfix-group-standalone-panel .hotfix-customer-group-panel {
  padding: 22px;
}

/* ============================================================
   窄屏适配（桌面宽度仍需可用，不为设计稿 1640 锁死）
   ============================================================ */
@media (max-width: 1280px) {
  .nav-panel {
    width: 280px;
  }

  .stats-cell {
    padding: 12px 14px;
  }

  .stats-cell-value {
    font-size: 12px;
  }

  .form-grid,
  .release-upload-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-group-form,
  .hotfix-group-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .topbar {
    gap: 12px;
    padding: 0 14px;
  }

  .topbar-console {
    display: none;
  }

  .accent-row {
    display: none;
  }

  .nav-panel {
    width: 220px;
  }

  .workspace-scroll {
    padding: 14px;
  }

  .server-usage-panel {
    height: auto;
    flex-wrap: wrap;
  }

  .stats-cell {
    min-width: 33.33%;
    border-bottom: 1px solid var(--line);
  }

  .form-grid,
  .release-upload-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .topbar-title {
    font-size: 15px;
  }

  .topbar-btn {
    padding: 0 9px;
  }

  .nav-panel {
    width: 180px;
  }

  .stats-cell {
    min-width: 50%;
  }
}

/* ============================================================
   中文不进等宽轨道（放在最后，压住各组件里的等宽声明）
   ============================================================
   风格包的规则是「参数名 / 数值 / 状态 / 时间码用 JetBrains Mono，
   大写 + letter-spacing .12–.24em」。JetBrains Mono 没有汉字，中文会回落到
   Noto Sans SC，但 letter-spacing 照样生效，于是「运行模式」被拉成
   「运 行 模 式」、「复制」被拉成「复 制」。
   规则：纯拉丁的标记（TRAFFIC / ACTIVE / ONLINE / STATUS）保持规范里的宽字距；
   中文或中英混排的标签一律收紧到 .04em，纯中文标签直接换回界面字体。 */

/* 混排：字体保留等宽（拉丁部分仍是规范里的样子），只收字距 */
.stats-cell-meta,
.admin-build-tag,
.module-workflow-status,
.module-setting-muted,
.module-value-hint,
.module-limit-unit,
.field-hint,
.readonly-id {
  letter-spacing: .04em;
}

/* 混排（英文通道名 + 中文类型说明）同理只收字距 */
.release-channel-stack span,
.badge {
  letter-spacing: .04em;
}

/* 纯中文：换回界面字体，等宽在这里没有任何信息量 */
.stat-card span,
.module-group-heading-inner small,
.creator-usage-day td:first-child span,
.creator-usage-detail-row td,
.license-feature-picker-head span,
.license-feature-duration > span,
.ops-mini-btn span,
.mono .subtle,
.subtle.mono,
.soft-tag {
  font-family: var(--font-ui);
  letter-spacing: .04em;
  text-transform: none;
}

.license-feature-picker-head span,
.license-feature-duration > span,
.creator-usage-day td span {
  font-size: 11px;
}

.ops-mini-btn span {
  font-size: 11.5px;
}

.stat-card span {
  font-size: 10.5px;
}

.module-group-heading-inner small {
  font-size: 11px;
}

/* ============================================================
   主色层级（v4）
   ============================================================
   风格包原本只给主色两个出口：唯一的主操作实底 + 状态标记。
   结果一屏几十个次级按钮全是 1px 灰描边，颜色信息量为零。
   这里把主色按「动作性质」分四档，主色仍然只表示「可操作」，
   但正向操作不再和取消/删除长得一模一样：

     一档 主操作      主色实底 + ink 字      一屏一次（提交/发布/创建）
     二档 面板主按钮   20% 主色底 + 主色边字   每个面板一次（新增/刷新）
     三档 行内正向操作 主色边 + 主色字        编辑/下载/复制/续期/功能授权
     四档 中性与破坏   灰边灰字，hover 才变色  取消/收起/暂停/拖拽/删除
   ============================================================ */

/* ---- 二档：面板主按钮 ---- */
.section-header .neumo-btn,
.section-header .inline-actions .neumo-btn,
.section-header > .neumo-btn,
.title-with-actions .neumo-btn {
  border-color: var(--accent);
  background: var(--accent-12);
  color: var(--accent-text);
  font-weight: 700;
}

.section-header .neumo-btn:hover,
.section-header .inline-actions .neumo-btn:hover,
.section-header > .neumo-btn:hover,
.title-with-actions .neumo-btn:hover {
  background: var(--accent-20);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* 「显示全部」是撤销筛选，不是面板主操作 */
.section-header .creator-usage-clear {
  border-color: var(--line2);
  background: transparent;
  color: var(--fg2);
  font-weight: 500;
}

.section-header .creator-usage-clear:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: transparent;
}

/* ---- 三档：行内正向操作 ---- */
.module-edit-btn,
.module-download-btn,
.copy-chip,
.daily-expand-chip,
.action-grid--license-v4 button:nth-child(-n+2),
.action-grid--license button:nth-child(-n+2):not(.danger-text) {
  border-color: var(--accent);
  color: var(--accent-text);
}

.module-edit-btn:hover,
.module-download-btn:hover,
.copy-chip:hover,
.daily-expand-chip:hover,
.action-grid--license-v4 button:nth-child(-n+2):hover,
.action-grid--license button:nth-child(-n+2):not(.danger-text):hover {
  background: var(--accent-12);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* ---- 四档：中性与破坏，保持灰底灰字 ---- */
.module-delete-btn,
.module-drag-handle,
.action-grid--license-v4 button:nth-child(3),
.form-grid > .neumo-btn,
.license-form-actions .neumo-btn,
.module-expanded-head .neumo-btn {
  border-color: var(--line2);
  background: transparent;
  color: var(--fg2);
  font-weight: 500;
}

.module-delete-btn:hover,
.action-grid--license-v4 button.danger-text:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: transparent;
}

.module-drag-handle:hover,
.action-grid--license-v4 button:nth-child(3):hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

/* ---- 面板：所有面板都带 3px 主色顶栏，而不只是含主操作的那几个 ---- */
.panel {
  border-top: 3px solid var(--accent);
}

/* ---- 读数条：六格都是实时读数，进度条统一走主色 ---- */
.stats-fill {
  background: var(--accent);
}

/* 版本列表行里的「发布」原来是主色实底，和面板底部的「上传并发布」抢
   「一屏唯一主操作」的位置。降到三档（主色描边），层级才立得住。 */
.release-row-actions .ops-mini-btn.primary,
td .ops-mini-btn.primary {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent-text);
}

.release-row-actions .ops-mini-btn.primary:hover,
td .ops-mini-btn.primary:hover {
  background: var(--accent-12);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* ============================================================
   授权层 v5（2026-08-11）
   1. 造物机「客户生成任务」收进内置滚动框
   2. 造物机「功能授权」面板（模块管理下方）
   3. 客户授权「编辑」表单
   ============================================================ */

/* ---- 1. 客户生成任务：固定高度 + 内滚动，页面不再被任务列表拉长 ---- */
.creator-task-box {
  max-height: 420px;
  overflow: auto;
}

.creator-task-box thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ---- 2. 功能授权面板 ---- */
.authz-table-box {
  max-height: 560px;
}

/* 定宽表：展开行里的模块表比面板宽，auto 布局会把整张表撑出面板，
   横向滚动条跑到外层去。钉死列宽后，超宽的部分在模块表自己的框里滚。 */
.authz-table {
  table-layout: fixed;
}

.authz-table th:nth-child(1) { width: 26%; }
.authz-table th:nth-child(2) { width: 23%; }
.authz-table th:nth-child(3) { width: 13%; }
.authz-table th:nth-child(4) { width: 18%; }
.authz-table th:nth-child(5) { width: 20%; }

.authz-table td {
  vertical-align: top;
  padding-top: 9px;
  padding-bottom: 9px;
  white-space: normal;
}

.authz-table td > strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.authz-table .authz-customer-row.is-open {
  background: var(--panel2);
}

.authz-group-cell {
  min-width: 220px;
}

.authz-group-cell .customer-group-select {
  width: 100%;
  min-width: 0;
}

.authz-group-cell .subtle {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.4;
  white-space: normal;
}

/* 两个按钮，宽度不够就自动竖排，「用户组配额」五个字不会被切 */
.authz-row-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 7px 9px;
  min-width: 0;
}

.authz-row-actions button {
  padding: 0 4px;
}

.authz-expanded-row:hover {
  background: transparent;
}

.authz-expanded-row > td {
  padding: 0;
}

.authz-editor {
  padding: 22px;
  background: var(--panel2);
  border-top: 1px solid var(--line);
}

.authz-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}

.authz-editor-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.authz-editor-head strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--fg);
}

.authz-editor-head span {
  font-size: 11.5px;
  color: var(--fg3);
}

.authz-editor-actions {
  align-items: center;
  flex-wrap: wrap;
}

.authz-bulk-field {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--fg3);
  white-space: nowrap;
}

.authz-bulk-field input {
  height: 32px;
  width: 190px;
}

.authz-feature-wrap {
  border: 1px solid var(--line);
  background: var(--panel);
  max-height: 420px;
  overflow: auto;
}

.authz-feature-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.authz-feature-table td {
  white-space: nowrap;
}

.authz-feature-table input,
.authz-feature-table select {
  height: 32px;
  width: 100%;
  min-width: 0;
}

.authz-feature-table td:nth-child(4),
.authz-feature-table td:nth-child(5) {
  min-width: 190px;
}

.authz-feature-table td:nth-child(3) {
  min-width: 96px;
}

.authz-feature-table td:nth-child(6) {
  min-width: 110px;
}

.authz-feature-table td:nth-child(1) {
  min-width: 190px;
  white-space: normal;
}

.authz-feature-actions {
  min-width: 130px;
}

.authz-inline-hint {
  padding: 13px 0;
}

.authz-panel .authz-group-editor {
  border: 1px solid var(--line);
  background: var(--panel2);
  margin: 0 22px 13px;
}

/* ---- 3. 客户授权 · 编辑表单 ---- */
.license-edit-panel .license-edit-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.license-edit-panel .license-edit-meta b {
  color: var(--fg);
  font-size: 11px;
}

/* 授权操作从「功能授权 / 续期 / 停用 / 删除」变成「编辑 / 续期 / 暂停 / 删除」，
   仍是两列两行的方阵，这里只是把最小宽度钉住，中文标签不会被挤断。 */
.action-grid--license-v5 {
  min-width: 168px;
}

/* ============================================================
   运营层 v6（2026-08-11）
   ============================================================ */

/* ---- 顶栏：资源条搬进来，紧跟品牌名 ----
   注意选择器必须是「.topbar 后代」而不是加 class：
   refreshServerUsageOnly 每 10 秒用 outerHTML 原地重画这个节点，class 会被冲掉。 */
.topbar .server-usage-panel {
  height: 42px;
  flex: 1;
  min-width: 0;
  margin-left: 4px;
  background: transparent;
  border-bottom: none;
  border-left: 1px solid var(--line2);
}

.topbar .server-usage-panel .stats-cell {
  gap: 3px;
  padding: 0 14px;
  justify-content: center;
}

.topbar .server-usage-panel .stats-cell-head {
  gap: 6px;
}

.topbar .server-usage-panel .stats-cell-label {
  font-size: 9px;
  letter-spacing: .12em;
}

.topbar .server-usage-panel .stats-cell-meta {
  font-size: 9px;
}

.topbar .server-usage-panel .stats-cell-value {
  font-size: 12.5px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .server-usage-panel .stats-track {
  height: 2px;
}

/* 窄窗口先牺牲 IN / OUT 两格，主机读数优先 */
@media (max-width: 1180px) {
  .topbar .server-usage-panel .stats-cell:nth-last-child(-n+2) {
    display: none;
  }
}

@media (max-width: 980px) {
  .topbar .server-usage-panel {
    display: none;
  }
}

/* ---- 客户授权：可排序表头 ---- */
.license-table--hotfix thead th.sortable-col {
  cursor: pointer;
  user-select: none;
  transition: color 120ms linear;
}

.license-table--hotfix thead th.sortable-col:hover {
  color: var(--accent-text);
}

.license-table--hotfix thead th.is-sorted {
  color: var(--accent-text);
}

.sort-caret {
  display: inline-block;
  width: 12px;
  margin-left: 4px;
  font-size: 8px;
  vertical-align: 1px;
  color: var(--accent);
}

/* ---- 客户授权：最近上线可点开 ---- */
.license-last-seen-col.is-clickable {
  cursor: pointer;
}

.license-last-seen-col.is-clickable:hover .last-seen-cell strong {
  color: var(--accent-text);
}

.license-last-seen-col.is-open .last-seen-cell strong {
  color: var(--accent-text);
}

.license-last-seen-col.is-clickable .last-seen-cell strong::after {
  content: " ▾";
  font-size: 9px;
  color: var(--fg3);
}

.license-last-seen-col.is-open .last-seen-cell strong::after {
  content: " ▴";
  color: var(--accent);
}

/* ---- 展开行：编辑卡片 / 上线记录 ---- */
.license-table--hotfix tbody tr.license-edit-row,
.license-table--hotfix tbody tr.license-sessions-row {
  height: auto;
  background: var(--panel2);
}

.license-table--hotfix tbody tr.license-edit-row:hover,
.license-table--hotfix tbody tr.license-sessions-row:hover {
  background: var(--panel2);
}

.license-edit-row > td,
.license-sessions-row > td {
  padding: 0;
  white-space: normal;
}

/* 编辑卡片进了表格单元格，去掉它自己的面板外框，靠展开行的底色区分 */
.license-edit-row .license-edit-panel {
  margin: 0;
  border: none;
  border-top: 2px solid var(--accent);
  background: transparent;
}

/* ---- 上线记录 ---- */
.session-box {
  padding: 14px 22px 18px;
  border-top: 2px solid var(--accent);
}

.session-box-note {
  padding: 14px 22px;
  border-top: 2px solid var(--accent);
}

.session-box-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 9px;
}

.session-box-head strong {
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--fg);
}

.session-box-scroll {
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--line);
}

.session-box-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 30px;
}

.session-table {
  min-width: 620px;
}

.session-table tbody tr {
  height: 34px;
}

.session-table thead th:first-child,
.session-table tbody td:first-child {
  padding-left: 13px;
}

.session-table thead th:last-child,
.session-table tbody td:last-child {
  padding-right: 13px;
}

/* ============================================================
   运营层 v7（2026-08-11）
   ============================================================ */

/* ---- 版本号：状态栏右下角那串 + 工作区底部的「后台版本」，两处都不再显示 ---- */
.statusbar-version,
.admin-build-tag {
  display: none !important;
}

/* ---- 主题色 + 明暗：搬到底部状态栏最右侧 ---- */
.ops-theme-dock {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 13px;
}

.ops-theme-dock .accent-row {
  gap: 8px;
}

.ops-theme-dock .accent-swatch {
  width: 13px;
  height: 13px;
}

.ops-theme-dock .topbar-btn {
  height: 26px;
  padding: 0 12px;
  font-size: 9.5px;
}

@media (max-width: 900px) {
  .ops-theme-dock .accent-row {
    display: none;
  }
}

/* ---- 「AI产品」列名：点开的产品清单 ----
   菜单挂在 body 上（表格外层 .table-wrap--scroll 会裁剪），所以用 fixed。 */
.ops-col-menu {
  position: fixed;
  z-index: 90;
  min-width: 186px;
  max-height: 340px;
  overflow: auto;
  padding: 6px 0;
  background: var(--panel);
  border: 1px solid var(--line2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.ops-col-menu-head {
  padding: 6px 14px 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--fg3);
  text-transform: uppercase;
}

.ops-col-menu-item {
  width: 100%;
  height: 32px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  color: var(--fg2);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: color 120ms linear, background-color 120ms linear;
}

.ops-col-menu-item:hover {
  background: var(--panel2);
  color: var(--fg);
}

.ops-col-menu-item.is-active {
  color: var(--accent-text);
}

.ops-col-menu-mark {
  width: 7px;
  height: 7px;
  flex: none;
  border: 1px solid var(--fg3);
  transform: rotate(45deg);
}

.ops-col-menu-item.is-active .ops-col-menu-mark {
  background: var(--accent);
  border-color: var(--accent);
}

.ops-col-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 表头上的「当前只看某个产品」标记 */
.license-table--hotfix thead th.is-filtered {
  color: var(--accent-text);
}

.ops-col-filter-tag {
  margin-left: 6px;
  padding: 0 6px;
  display: inline-block;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-text);
  font-size: 9.5px;
  letter-spacing: normal;
  text-transform: none;
}

/* ============================================================
   运营层 v8（2026-08-11）
   授权列表：表格自己滚，页面不再被行数拉长
   ============================================================ */

/* 不用算魔法数字：外层 .ops-app 已经是 100vh 的 flex 列（topbar 60 + statusbar 44
   之外全归 .workspace-scroll），这里把剩余高度一路交给表格框即可。
   .table-wrap--scroll 的 overflow:auto 和 sticky 表头都是现成的。 */
.licenses-page--hotfix {
  flex: 1;
  min-height: 0;
}

.licenses-page--hotfix .license-list-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 新增表单展开时表格跟着让位；再挤也留 200px，剩下的交给 .workspace-scroll 滚 */
.licenses-page--hotfix .license-list-panel .table-wrap {
  flex: 1;
  min-height: 200px;
}

/* ---- 新建授权：只剩 产品 / 客户名称 / Price / 激活时长 四项，一行摆开 ----
   .form-grid 默认三列，这里改四列；按钮落到下一行、按自身宽度靠左。
   编辑卡（.license-edit-form）字段更多，不吃这条。 */
.inline-create-form:not(.license-edit-form),
.license-create-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 两个按钮收进 .license-form-actions（整行贯通），靠右排。
   包在 div 里之后 `.form-grid > .action-btn.primary` 那条尺寸规则就够不着了，
   这里把它当时给的 48px / 26px / 13.5px 补回来，免得主按钮弹回 56px 比取消高一截。 */
/* 注意 .license-form-actions 同时挂着 .form-row（flex-direction: column），
   不显式写回 row 的话两个按钮会竖着叠起来居中。 */
.inline-create-form .license-form-actions,
.license-create-form .license-form-actions {
  flex-direction: row;
  justify-content: flex-end;
}

.inline-create-form .license-form-actions > .action-btn,
.inline-create-form .license-form-actions > .neumo-btn,
.license-create-form .license-form-actions > .action-btn,
.license-create-form .license-form-actions > .neumo-btn {
  height: 48px;
}

.inline-create-form .license-form-actions > .action-btn.primary,
.license-create-form .license-form-actions > .action-btn.primary {
  padding: 0 26px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .16em;
}

/* 窄屏得盖回去：上面那两条 @media 在本条之前，晚出现的规则会赢 */
@media (max-width: 1280px) {
  .inline-create-form:not(.license-edit-form),
  .license-create-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .inline-create-form:not(.license-edit-form),
  .license-create-form {
    grid-template-columns: 1fr;
  }
}