:root {
  /* 恢复项目重构前沿用的 Tabler 蓝操作色；绿色只保留给成功和正常等语义状态。 */
  --gof-canvas: #f6f8fa;
  --gof-surface: #ffffff;
  --gof-surface-subtle: #f7f9fb;
  --gof-ink: #182433;
  --gof-text-secondary: #536273;
  --gof-text-muted: #667382;
  --gof-line: #dce2e8;
  /* 输入控件需要比普通分隔线更清楚，但仍使用中性灰，避免重新引入绿色倾向。 */
  --gof-line-strong: #cbd5e1;
  --gof-primary: #066fd1;
  --gof-primary-hover: #0559a7;
  --gof-primary-active: #04477d;
  --gof-primary-soft: #eaf2fb;
  --gof-info: #1d5fa7;
  --gof-info-soft: #eaf2fb;
  --gof-warning: #946200;
  --gof-warning-soft: #fff4d6;
  --gof-danger: #b42318;
  --gof-danger-soft: #fdecec;
  --gof-radius-sm: 4px;
  --gof-radius: 6px;
  --gof-shadow: 0 2px 10px rgb(24 36 51 / 5%);
  --gof-space-1: 4px;
  --gof-space-2: 8px;
  --gof-space-3: 12px;
  --gof-space-4: 16px;
  --gof-space-5: 20px;
  --gof-space-6: 24px;
  --gof-space-8: 32px;
  --gof-space-10: 40px;
  --gof-space-12: 48px;
  --gof-content-width: 1180px;
  --gof-data-width: 1600px;
  --gof-sidebar-width: 232px;
  /* 桌面工具栏与侧栏品牌区保持同高，账户入口因此始终处在清楚的右上层级。 */
  --gof-desktop-header-height: 72px;
  --gof-mobile-header-height: 60px;
  --tblr-primary: #066fd1;
  --tblr-primary-rgb: 6, 111, 209;
  --tblr-body-color: #182433;
  --tblr-body-bg: #f6f8fa;
  --tblr-border-color: #dce2e8;
}

/* 登录页保持单一任务和稳定宽度；提示、字段与主操作按表单阅读顺序紧密排列。 */
.login-container {
  width: min(100% - 24px, 420px);
  max-width: 420px;
}

.login-card {
  border-color: var(--gof-line);
  box-shadow: var(--gof-shadow);
}

.login-card .card-body {
  padding: 28px;
}

.login-heading {
  margin-bottom: 22px;
}

.login-title {
  margin: 0 0 4px;
  color: var(--gof-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.login-lock-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  color: var(--gof-text-muted);
}

.login-lock-hint .ti {
  margin-top: 2px;
  flex: 0 0 auto;
}

/*
 * 密码输入使用与账号输入相同的单一 form-control，让 Android WebView/Chromium 的
 * 自动填充底色覆盖完整圆角表面。左右图标仅作为绝对定位覆盖层，不再参与分段布局，
 * 因而聚焦时不会出现“外层焦点环 + 中间输入框蓝块 + 两侧白块”的三重边界。
 */
.input-icon.password-field .form-control {
  padding-right: 52px;
}

.password-toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  min-width: 40px;
  min-height: 0;
  border: 0;
  border-left: 1px solid var(--gof-line);
  border-radius: 0 var(--gof-radius) var(--gof-radius) 0;
  background: transparent;
}

/* 输入框聚焦时只提升分隔线颜色，焦点环仍由完整的 form-control 统一绘制。 */
.password-field .form-control:focus + .password-toggle {
  border-left-color: var(--gof-primary);
}

.login-submit {
  position: relative;
}

/* 激活码工作台保持左右栏同高；空、加载、成功和失败都在同一结果表面内切换。 */
.generator-layout {
  max-width: var(--gof-content-width);
}

.generator-workspace > [class*="col-"] > .card {
  min-height: 100%;
}

.generator-form,
.license-result {
  overflow: hidden;
}

.generator-result-body {
  display: grid;
  min-height: 386px;
  align-content: start;
}

.generator-result-empty {
  align-self: center;
  padding: 34px 20px;
}

.generator-result-empty .empty-icon {
  color: var(--gof-primary);
}

.license-result .card-footer {
  min-height: 65px;
}

/* 密钥页的状态、权限和示例直接分区，不在卡片内部再制造装饰性小卡片。 */
.api-access-layout {
  max-width: var(--gof-content-width);
}

.secret-field .form-control {
  min-width: 0;
}

.api-key-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.api-permission-list {
  display: grid;
  gap: 12px;
}

.api-permission-list .status {
  min-height: 28px;
  align-items: center;
}

.api-examples {
  display: grid;
  gap: 22px;
}

.api-example-block + .api-example-block {
  padding-top: 22px;
  border-top: 1px solid var(--gof-line);
}

.api-example-title {
  margin: 0 0 10px;
  color: var(--gof-ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
}

@media (max-width: 767.98px) {
  .login-card .card-body {
    padding: 22px 20px;
  }

  .login-title {
    font-size: 21px;
  }

  .generator-result-body {
    min-height: 330px;
  }

  .form-control.license-output {
    min-height: 220px;
  }

  .license-result .card-footer .btn {
    width: 100%;
  }

  .api-key-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .api-key-actions .form-check,
  .api-key-actions .small {
    width: 100%;
  }

}

html,
body {
  /* 320px 视口仍可能为垂直滚动条预留 15px；不强制文档最小宽度，避免因此产生
     页面级横向滚动。固定格式组件各自在容器内通过 minmax、换行或卡片化收缩。 */
  min-width: 0;
  min-height: 100%;
  letter-spacing: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--gof-canvas);
  color: var(--gof-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;
}

::selection {
  color: #fff;
  background: var(--gof-primary);
}

a {
  text-underline-offset: 3px;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--gof-primary) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff !important;
}

.skip-link {
  position: fixed;
  z-index: 1090;
  top: 8px;
  left: 12px;
  padding: 8px 12px;
  border-radius: var(--gof-radius-sm);
  background: var(--gof-ink);
  color: #fff;
  transform: translateY(-150%);
  transition: transform 160ms ease-out;
}

.skip-link:focus {
  color: #fff;
  transform: translateY(0);
}

.app-shell {
  min-height: 100vh;
}

.app-sidebar {
  position: fixed;
  z-index: 1020;
  inset: 0 auto 0 0;
  display: none;
  width: var(--gof-sidebar-width);
  min-height: 100vh;
  flex-direction: column;
  border-right: 1px solid var(--gof-line);
  background: var(--gof-surface);
}

.app-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: var(--gof-ink);
  text-decoration: none;
}

.app-sidebar > .app-brand {
  /*
   * 品牌区和桌面顶栏共用同一个固定高度。这里同时约束 height、min/max-height
   * 与 flex-basis，避免浏览器放大或系统字体变化后，品牌文字的固有高度把侧栏
   * 首行撑高，导致左右两段分隔线在交界处出现几个像素的错位。
   */
  height: var(--gof-desktop-header-height);
  min-height: var(--gof-desktop-header-height);
  max-height: var(--gof-desktop-header-height);
  flex: 0 0 var(--gof-desktop-header-height);
  box-sizing: border-box;
  padding: 16px 18px;
  border-bottom: 1px solid var(--gof-line);
}

.brand-mark {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  /* 品牌标记沿用重构前的深色中性块，不把主操作蓝消耗在装饰位置。 */
  background: var(--gof-ink);
  font-size: 15px;
  font-weight: 800;
}

.brand-mark-lg {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.app-brand-copy,
.app-account-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.app-brand-copy strong,
.app-account-copy strong {
  overflow: hidden;
  color: var(--gof-ink);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-brand-copy small,
.app-account-copy small {
  overflow: hidden;
  color: var(--gof-text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding: 14px 12px 20px;
  overflow-y: auto;
}

.app-nav-group + .app-nav-group {
  margin-top: 20px;
}

.app-nav-heading {
  margin: 0 8px 6px;
  color: var(--gof-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.app-nav-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 2px;
  list-style: none;
}

.app-nav-link {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--gof-radius);
  color: var(--gof-text-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}

.app-nav-link .ti {
  width: 20px;
  flex: 0 0 20px;
  font-size: 19px;
  text-align: center;
}

.app-nav-link:hover {
  color: var(--gof-ink);
  background: var(--gof-surface-subtle);
}

.app-nav-link.is-active {
  color: var(--gof-primary-active);
  background: var(--gof-primary-soft);
  font-weight: 650;
}

.app-account-summary {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 9px;
}

/*
 * 桌面账户菜单是全局工具栏中的一个稳定工作区，而不是覆盖在页面工具栏上的浮层。
 * 触发器使用普通按钮，菜单内继续使用普通链接和 POST 表单，键盘与 Bootstrap Dropdown
 * 的焦点管理都能自然工作；长账号只在触发器上截断，展开菜单中保留完整换行空间。
 */
.app-desktop-header {
  display: none;
}

.app-account-menu {
  min-width: 0;
}

.app-account-trigger {
  display: flex;
  min-width: 40px;
  max-width: min(300px, calc(100vw - 32px));
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--gof-radius);
  color: var(--gof-ink);
  text-align: left;
}

.app-account-trigger:hover,
.app-account-trigger[aria-expanded="true"] {
  border-color: var(--gof-line);
  background: var(--gof-surface-subtle);
  color: var(--gof-ink);
}

.app-account-trigger .avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.app-account-trigger-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.app-account-trigger-copy strong,
.app-account-trigger-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-account-trigger-copy strong {
  color: var(--gof-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 18px;
}

.app-account-trigger-copy small {
  color: var(--gof-text-muted);
  font-size: 11px;
  line-height: 16px;
}

.app-account-trigger-chevron {
  flex: 0 0 auto;
  color: var(--gof-text-muted);
  font-size: 16px;
  transition: transform 150ms ease-out;
}

.app-account-trigger[aria-expanded="true"] .app-account-trigger-chevron {
  transform: rotate(180deg);
}

.app-account-dropdown {
  width: min(280px, calc(100vw - 24px));
  /* 覆盖 Tabler 的下拉间距令牌，让 Popper 翻转到上方时仍能自动使用正确方向的边距。 */
  --tblr-dropdown-spacer: 8px;
  padding: 8px;
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  box-shadow: 0 14px 36px rgb(24 36 51 / 18%);
}

.app-account-dropdown-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.app-account-dropdown-summary .avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

/* 下拉摘要是查看完整身份的地方，长显示名和用户名允许任意断行，不被触发器的省略规则截掉。 */
.app-account-dropdown-summary .app-account-copy strong,
.app-account-dropdown-summary .app-account-copy small {
  overflow-wrap: anywhere;
  white-space: normal;
}

.app-account-dropdown .dropdown-item {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  border-radius: var(--gof-radius-sm);
}

.app-account-dropdown .dropdown-item .ti {
  width: 20px;
  flex: 0 0 20px;
  font-size: 18px;
  text-align: center;
}

.app-account-menu-form {
  margin: 0;
}

.app-account-menu-form .dropdown-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}

.app-account-menu-form .dropdown-item:hover,
.app-account-menu-form .dropdown-item:focus-visible {
  background: var(--gof-danger-soft);
}

.app-account-logout {
  color: var(--gof-danger);
}

.app-mobile-header {
  position: sticky;
  z-index: 1015;
  top: 0;
  display: grid;
  height: var(--gof-mobile-header-height);
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gof-line);
  background: var(--gof-surface);
}

.app-brand-mobile {
  justify-self: center;
  font-size: 14px;
}

.app-brand-mobile .brand-mark {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.app-menu-button,
.app-mobile-avatar {
  width: 44px;
  height: 44px;
}

/* 768 至 1023px 已使用移动抽屉，但通用 .btn-icon 仍是 40px；提高选择器优先级，
   确保平板和手机上的导航触控目标在两个方向都不小于 44px。 */
.app-mobile-header .app-menu-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.app-mobile-avatar {
  display: inline-grid;
  place-items: center;
  justify-self: end;
  text-decoration: none;
}

.app-drawer {
  width: min(304px, calc(100vw - 32px));
  background: var(--gof-surface);
}

.app-drawer .offcanvas-header {
  min-height: 68px;
  border-bottom: 1px solid var(--gof-line);
}

.app-drawer .offcanvas-body {
  padding: 16px 12px 24px;
}

.app-drawer-footer {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-top: 1px solid var(--gof-line);
}

.app-main {
  min-width: 0;
  /* 顶栏占据文档流，主区只补足剩余视口高度，短页面不会凭空多出一段滚动空白。 */
  min-height: calc(100vh - var(--gof-mobile-header-height));
}

.anonymous-main {
  min-height: 100vh;
}

.content-container,
.page-header .container-xl,
.page-body .container-xl {
  width: min(100% - 32px, var(--gof-content-width));
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.page-header .container-fluid,
.page-body .container-fluid,
.container-data {
  width: min(100% - 32px, var(--gof-data-width));
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.page-header {
  padding: 28px 0 0;
}

.page-body {
  padding: 22px 0 36px;
}

.page-title {
  color: var(--gof-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.page-subtitle,
.text-secondary {
  color: var(--gof-text-secondary) !important;
}

.card {
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  background: var(--gof-surface);
  box-shadow: none;
}

.card-header,
.card-footer {
  border-color: var(--gof-line);
}

.card-title,
.modal-title {
  color: var(--gof-ink);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0;
}

.form-control,
.form-select,
.btn {
  min-height: 40px;
  border-radius: var(--gof-radius);
  font-size: 14px;
}

.form-control,
.form-select {
  border-color: var(--gof-line-strong);
  color: var(--gof-ink);
  background-color: #fff;
}

.form-control::placeholder {
  /* 占位文字仍属于可操作表单的必要提示，使用与白底达到 4.5:1 以上对比度的
     次要文字色，避免 Tabler 默认浅灰在普通字号下难以辨认。 */
  color: var(--gof-text-muted);
  opacity: 1;
}

/* 表单格式提示不能依赖 Tabler 较浅的 secondary token；当前中性灰在白色表面上
   仍达到普通文本 4.5:1 的要求，同时继续与正文形成清楚但不过度的层级。 */
.form-hint,
.empty-subtitle {
  color: var(--gof-text-muted);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gof-primary);
  box-shadow: 0 0 0 3px rgb(6 111 209 / 16%);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-right: 14px;
  padding-left: 14px;
  font-weight: 600;
}

.btn-icon {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

.btn-primary {
  border-color: var(--gof-primary);
  background: var(--gof-primary);
}

.btn-primary:hover {
  border-color: var(--gof-primary-hover);
  background: var(--gof-primary-hover);
}

.btn-primary:active,
.btn-primary.active {
  border-color: var(--gof-primary-active);
  background: var(--gof-primary-active);
}

.btn-danger {
  border-color: var(--gof-danger);
  background: var(--gof-danger);
}

.btn:disabled,
.form-control:disabled,
.form-select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.alert {
  border-width: 1px;
  border-radius: var(--gof-radius);
}

.app-flashes {
  padding-top: 20px;
}

.modal-content {
  border: 0;
  border-radius: var(--gof-radius);
  /* 覆盖层沿用正文中性墨色的透明阴影，避免非语义区域出现绿色偏色。 */
  box-shadow: 0 14px 36px rgb(24 36 51 / 18%);
}

.modal-header,
.modal-footer {
  border-color: var(--gof-line);
}

.app-toast {
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  box-shadow: var(--gof-shadow);
}

.error-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 32px 16px;
}

.app-main .error-page {
  min-height: calc(100vh - var(--gof-mobile-header-height));
}

.error-panel {
  width: min(100%, 480px);
  text-align: center;
}

.error-code {
  color: var(--gof-primary);
  font-size: 64px;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.error-panel h1 {
  margin: 18px 0 8px;
  font-size: 24px;
  letter-spacing: 0;
}

.error-panel p {
  max-width: 40ch;
  margin: 0 auto 22px;
  color: var(--gof-text-secondary);
}

.login-surface {
  background: var(--gof-canvas);
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gof-ink);
  font-size: 18px;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .app-sidebar {
    display: flex;
  }

  /*
   * 顶栏采用正常文档流并保持 sticky，而不是 fixed 覆盖页面；这样日志页右上角的搜索、
   * 数据页的新增按钮和账户入口各有自己的行，不会发生点击区域重叠。侧栏仍然固定，
   * 所以滚动时导航与账户入口都可快速返回。
   */
  .app-desktop-header {
    position: sticky;
    z-index: 1015;
    top: 0;
    display: flex;
    height: var(--gof-desktop-header-height);
    box-sizing: border-box;
    align-items: center;
    margin-left: var(--gof-sidebar-width);
    border-bottom: 1px solid var(--gof-line);
    background: var(--gof-surface);
  }

  .app-desktop-header-inner {
    display: flex;
    width: min(100% - 32px, var(--gof-data-width));
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    margin: 0 auto;
  }

  .app-mobile-header {
    display: none;
  }

  .app-main {
    min-height: calc(100vh - var(--gof-desktop-header-height));
    margin-left: var(--gof-sidebar-width);
  }

  .app-main .error-page {
    min-height: calc(100vh - var(--gof-desktop-header-height));
  }
}

@media (max-width: 1023.98px) {
  .app-nav-link {
    min-height: 44px;
  }
}

@media (max-width: 767.98px) {
  .content-container,
  .page-header .container-xl,
  .page-body .container-xl,
  .page-header .container-fluid,
  .page-body .container-fluid,
  .container-data {
    width: min(100% - 24px, var(--gof-data-width));
  }

  .page-header {
    padding-top: 20px;
  }

  .page-body {
    padding-top: 16px;
    padding-bottom: 28px;
  }

  .page-title {
    font-size: 22px;
  }

  .form-control,
  .form-select,
  .btn,
  .btn-icon {
    min-height: 44px;
  }

  .btn-icon {
    width: 44px;
    min-width: 44px;
  }

  /*
   * Tabler 的 input-group 输入框默认使用 width: 1% 配合 Flex 扩张；切换为 Grid 后
   * Flex 不再生效，若不显式覆盖就会缩成空白小块。移动端第一行保留完整密钥输入和
   * 44px 显示按钮，复制作为独立整行操作，既避免误触也维持清楚的键盘顺序。
   */
  .secret-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px 0;
  }

  .secret-field .form-control {
    width: 100%;
    min-width: 0;
    grid-column: 1 / 2;
    border-radius: var(--gof-radius) 0 0 var(--gof-radius);
  }

  .secret-field #toggle-api-key {
    grid-column: 2 / 3;
    margin-left: -1px;
    border-radius: 0 var(--gof-radius) var(--gof-radius) 0;
  }

  .secret-field #copy-api-key {
    width: 100%;
    grid-column: 1 / 3;
    margin-left: 0;
    border-radius: var(--gof-radius);
  }

  .error-code {
    font-size: 52px;
  }

  .error-panel h1 {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.generator-layout {
  max-width: 960px;
}

.form-control.license-output {
  width: 100%;
  min-height: 280px;
  padding: 14px 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  resize: vertical;
  word-break: break-all;
  white-space: pre-wrap;
}

.license-result .card-body {
  padding-bottom: 24px;
}

.result-meta > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.button-progress {
  display: none;
}

.is-loading .button-label,
.is-loading > .ti {
  display: none;
}

.is-loading .button-progress {
  display: inline-block;
}

.log-detail {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-card-header {
  min-height: 56px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.log-category-tabs {
  min-width: 0;
  margin-bottom: -1px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.log-category-tabs .nav-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  white-space: nowrap;
}

.log-result-count {
  min-width: 88px;
  padding-bottom: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.log-level-filter {
  width: 136px;
  flex: 0 0 136px;
}

.log-runtime-summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gof-line);
  background: var(--gof-surface-subtle);
  color: var(--gof-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.log-runtime-summary .ti {
  margin-top: 2px;
  flex: 0 0 auto;
  color: var(--gof-primary);
}

.log-runtime-message {
  min-width: 420px;
  max-width: 760px;
}

.log-runtime-message-stack {
  display: grid;
  min-width: 0;
  gap: 8px;
  justify-items: start;
}

.log-runtime-message pre {
  width: 100%;
  max-height: 240px;
  margin: 0;
  /*
   * 运行日志正文沿用 pre 语义以保留换行，但不能继承全局代码块的深色背景；
   * 否则深色正文变量会落在深底上，外部接口日志会几乎无法阅读。显式使用
   * 页面浅色表面，并同时给出边界，保证前景与背景始终成对出现。
   */
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius-sm);
  background: var(--gof-surface-subtle);
  color: var(--gof-ink);
  font-family: var(--tblr-font-monospace);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  white-space: pre-wrap;
  word-break: break-word;
}

.log-copy-button {
  min-height: 32px;
}

.log-time {
  font-variant-numeric: tabular-nums;
}

.log-license-result {
  min-width: 160px;
  max-width: 360px;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  .log-page-header .page-title {
    font-size: 1.25rem;
  }

  .log-card-header {
    align-items: flex-end;
    gap: 8px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .log-category-tabs {
    margin-right: 0;
    margin-left: 0;
  }

  .log-result-count {
    min-width: 72px;
    font-size: 0.75rem;
  }

  /* 触屏设备无法通过 title 悬停查看被截断正文，因此移动端直接允许详情换行显示完整内容。 */
  .log-detail {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
}

.table td,
.table th {
  vertical-align: middle;
}

.account-actions-column {
  width: 140px;
  min-width: 140px;
  text-align: right;
  white-space: nowrap;
}

.account-actions {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.account-actions .btn {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.permission-summary {
  display: flex;
  max-width: 360px;
  flex-wrap: wrap;
  gap: 4px;
}

.permission-fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

.permission-option {
  height: 100%;
  min-height: 70px;
  margin: 0;
  padding: 12px 12px 12px 38px;
  border: 1px solid var(--gof-line);
  border-radius: 6px;
}

.permission-option .form-check-input {
  margin-top: 3px;
}

.permission-option small {
  display: block;
  margin-top: 3px;
  color: var(--gof-text-muted);
  line-height: 1.45;
}

/* 租户区直接复用 Tabler 官方 Data grid 的字段结构。
   以下样式只约束卡片密度和操作区尺寸，不重新实现组件的排版规则。 */
.tenant-grid {
  margin-bottom: 0;
}

.tenant-card {
  overflow: hidden;
}

.tenant-card .card-header {
  min-height: 72px;
  gap: 16px;
}

.tenant-card .card-title {
  font-size: 16px;
}

.tenant-heading,
.tenant-heading-text {
  min-width: 0;
}

.tenant-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.tenant-actions .btn {
  width: 36px;
  height: 36px;
}

.tenant-datagrid {
  --tblr-datagrid-item-width: 10rem;
  --tblr-datagrid-padding: 1rem;
}

.tenant-datagrid .datagrid-content {
  display: flex;
  min-height: 36px;
  align-items: center;
}

.tenant-datagrid .datagrid-title {
  letter-spacing: 0;
}

.tenant-count {
  margin: 12px 0 24px;
}

.tenant-card-footer {
  display: flex;
  justify-content: flex-end;
  background: var(--gof-surface-subtle);
}

/*
 * 数据表的普通状态优先保证逐行扫描：租户名称不得逐字换行，数据预览只占必要宽度。
 * 授权用户主动显示全文后，令牌才在当前单元格内换行，避免默认列表被长内容主导。
 */
.record-card {
  overflow: hidden;
}

.record-table thead th {
  background: var(--gof-surface-subtle);
  color: var(--gof-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.record-table tbody tr[data-record-search] {
  transition: background-color 120ms ease;
}

.record-table tbody tr[data-record-search]:hover {
  background: var(--gof-surface-subtle);
}

.record-tenant-column {
  width: 100px;
  min-width: 100px;
  white-space: nowrap;
}

.record-content-cell {
  min-width: 310px;
}

.record-secret {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.record-data {
  display: block;
  width: 190px;
  min-width: 0;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid var(--gof-line);
  border-radius: 4px;
  background: var(--gof-surface-subtle);
  color: var(--gof-ink);
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-data.is-revealed {
  width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.record-secret .btn {
  flex: 0 0 32px;
}

.record-data-input {
  min-height: 132px;
  resize: vertical;
}

/*
 * 数据表工具栏沿用 Tabler card-header 的结构：搜索承担高频入口，组合条件按需展开。
 * 固定操作按钮尺寸并限制搜索最大宽度，避免条件数量、占位文案或窗口变化推动布局跳动。
 */
.record-toolbar {
  min-height: 60px;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
}

.record-toolbar-search {
  width: 100%;
  max-width: 520px;
  flex: 1 1 320px;
}

.record-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.record-filter-toggle {
  min-width: 112px;
}

.record-filter-count-badge {
  min-width: 20px;
  padding-right: 5px;
  padding-left: 5px;
  text-align: center;
}

.record-filter-chevron {
  transition: transform 160ms ease;
}

.record-filter-toggle[aria-expanded="true"] .record-filter-chevron {
  transform: rotate(180deg);
}

/* 展开区与表格共用一张卡片，只用分隔线和轻背景建立层级，避免出现卡片嵌套。 */
.record-filter-collapse {
  border-bottom: 1px solid var(--gof-line);
  background: var(--gof-surface-subtle);
}

.record-filter-panel {
  min-width: 0;
  margin: 0;
  padding: 16px 20px 18px;
  border: 0;
}

.record-filter-panel .form-label {
  margin-bottom: 6px;
  color: var(--gof-text-muted);
  font-size: 12px;
}

/*
 * 后台同步任务与筛选、表格共用数据卡片，但主页面只保留固定高度的任务入口。
 * 详细进度放入右侧任务中心，完成次数因此不会继续增加数据表上方的纵向占用。
 */
.record-sync-jobs {
  padding: var(--gof-space-3) var(--gof-space-4);
  border-bottom: 1px solid var(--gof-line);
  background: var(--gof-surface-subtle);
}

.record-sync-jobs-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--gof-space-3);
}

.record-sync-jobs-heading-copy {
  min-width: 0;
}

.record-sync-jobs-title {
  margin: 0;
  color: var(--gof-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.record-sync-jobs-description {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 20px;
}

.record-sync-jobs-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gof-space-2);
}

.record-sync-jobs-live {
  margin-right: var(--gof-space-1);
  color: var(--gof-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-align: right;
}

.record-sync-jobs-refresh {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
}

.record-sync-jobs-open {
  min-height: 44px;
  flex: 0 0 auto;
}

.record-sync-jobs-open-count {
  min-width: 20px;
  text-align: center;
}

/*
 * 任务中心使用 Tabler/Bootstrap 原生 Offcanvas，保留其焦点约束和键盘关闭行为。
 * 内容采用平面分组列表而非卡片套卡片；抽屉自身滚动，不改变主数据表位置。
 */
.record-sync-jobs-drawer {
  --tblr-offcanvas-width: min(520px, 100vw);

  background: var(--gof-surface);
}

.record-sync-jobs-drawer-header {
  align-items: flex-start;
  padding: var(--gof-space-5);
  border-bottom: 1px solid var(--gof-line);
}

.record-sync-jobs-drawer-description {
  margin: var(--gof-space-1) 0 0;
  font-size: 13px;
  line-height: 20px;
}

.record-sync-jobs-drawer-body {
  padding: 0;
}

.record-sync-job-group + .record-sync-job-group {
  border-top: 1px solid var(--gof-line);
}

.record-sync-job-group-heading {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--gof-space-2);
  padding: var(--gof-space-3) var(--gof-space-5) var(--gof-space-2);
}

.record-sync-job-group-heading h3 {
  margin: 0;
  color: var(--gof-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

.record-sync-jobs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.record-sync-job {
  min-width: 0;
  padding: var(--gof-space-3) var(--gof-space-5) var(--gof-space-4);
  border-top: 1px solid var(--gof-line);
}

.record-sync-job-attention {
  background: var(--gof-surface-subtle);
}

.record-sync-job-heading,
.record-sync-job-identity,
.record-sync-job-counts {
  display: flex;
  min-width: 0;
}

.record-sync-job-heading {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gof-space-2);
}

.record-sync-job-identity {
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px var(--gof-space-2);
}

.record-sync-job-title {
  color: var(--gof-ink);
  font-size: 13px;
}

.record-sync-job-time,
.record-sync-job-progress-summary,
.record-sync-job-counts,
.record-sync-job-note {
  font-size: 12px;
  line-height: 18px;
}

.record-sync-job-progress-summary {
  margin-top: var(--gof-space-2);
  color: var(--gof-ink);
  font-weight: 600;
}

.record-sync-job-progress {
  height: 6px;
  margin-top: 6px;
  background: var(--gof-line);
}

.record-sync-job-counts {
  margin-top: var(--gof-space-2);
  flex-wrap: wrap;
  gap: 2px var(--gof-space-3);
}

.record-sync-job-note {
  margin: 6px 0 0;
}

.record-sync-job-history {
  padding-top: var(--gof-space-3);
  padding-bottom: var(--gof-space-3);
}

.record-sync-job-history-result {
  margin-top: var(--gof-space-1);
  font-size: 12px;
  line-height: 18px;
}

.record-sync-jobs-empty {
  padding: var(--gof-space-10) var(--gof-space-5);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

/*
 * 选择、记录 ID 与设备编号都是短而稳定的定位字段。桌面端为三列预留固定轨道，
 * 让时间、数据正文和操作列不会因编号长度或复选框焦点环反复横向跳动。
 */
.record-selection-column {
  width: 56px;
  min-width: 56px;
  text-align: center;
}

.record-id-column {
  width: 88px;
  min-width: 88px;
  white-space: nowrap;
}

/* 等级只占 0..999 的短数字轨道；固定宽度让 KID 与设备列在桌面端保持稳定。 */
.record-level-column {
  width: 68px;
  min-width: 68px;
  white-space: nowrap;
}

.record-remote-sync-column {
  width: 132px;
  min-width: 132px;
  white-space: nowrap;
}

.record-device-column {
  width: 144px;
  min-width: 144px;
  overflow-wrap: anywhere;
}

/*
 * 原生复选框仍负责 checked、indeterminate 与键盘语义；外层 label 只把命中区域扩展
 * 到 44px，不伪造按钮角色。这样鼠标、触控和屏幕阅读器都操作同一个真实控件。
 */
.record-checkbox-target {
  display: inline-grid;
  width: 44px;
  height: 44px;
  margin: -6px 0;
  place-items: center;
  border-radius: var(--gof-radius-sm);
  cursor: pointer;
}

.record-checkbox-target .form-check-input {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.record-checkbox-target:focus-within {
  background: var(--gof-primary-soft);
}

.record-device-link {
  display: inline-block;
  max-width: 100%;
  color: var(--gof-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
}

.record-device-link:hover {
  color: var(--gof-primary-hover);
}

/*
 * 批量操作属于同一数据卡片的临时上下文带，只通过边线和浅色表面区分层级。
 * hidden 必须显式覆盖 flex，避免浏览器或第三方样式更新后零选择状态仍占据空白高度。
 */
.record-bulk-toolbar {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: var(--gof-space-3);
  padding: var(--gof-space-2) var(--gof-space-4);
  border-bottom: 1px solid var(--gof-line);
  background: var(--gof-primary-soft);
}

.record-bulk-toolbar[hidden] {
  display: none;
}

.record-bulk-summary,
.record-bulk-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--gof-space-3);
}

.record-bulk-summary {
  flex-wrap: wrap;
}

.record-bulk-actions {
  flex: 0 0 auto;
}

.record-bulk-actions .btn {
  min-width: 128px;
  white-space: nowrap;
}

/*
 * 结果范围、每页数量和页码共用 footer，但各自保持独立宽度。页码允许在窄桌面换行，
 * 不使用绝对定位或固定总宽度，避免总页数变化时覆盖记录统计。
 */
.record-footer {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gof-space-3);
  padding: var(--gof-space-3) var(--gof-space-4);
}

.record-count {
  min-width: 0;
  flex: 1 1 280px;
}

.record-pagination-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--gof-space-2);
}

.record-page-size-label {
  margin: 0;
  color: var(--gof-text-muted);
  white-space: nowrap;
}

.record-page-size {
  width: 92px;
  min-width: 92px;
}

.record-pagination {
  justify-content: flex-end;
}

.record-pagination .page-link {
  display: inline-grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  padding: var(--gof-space-1) var(--gof-space-2);
  text-align: center;
}

/* 手工记录显示编辑和删除，接口记录显示只读锁和删除；两种行都需要稳定操作宽度。 */
.record-actions {
  width: 88px;
  text-align: right;
  white-space: nowrap;
}

/* 礼包码操作列只有一个按钮，保持更紧凑的固定宽度。 */
.gift-code-actions {
  width: 52px;
  text-align: right;
}

/*
 * 下载中心按运维列表设计：版本和真实文件名组成稳定主字段，长日志默认压缩为四行摘要，
 * 校验值和下载动作使用固定尺寸。所有单元格从顶部对齐，避免一条长日志把相邻信息悬在
 * 行高中央；展开后仍在原行阅读，不打断搜索和下载任务。
 */
.download-card {
  overflow: hidden;
}

/* 桌面和平板允许宽表在自身容器内横向滚动，但内容高度由表格自然撑开。显式关闭
   纵向滚动可避免 overflow-x:auto 的跨轴计算为仅 1px 高度差生成无意义滚动条。 */
.download-card .table-responsive {
  overflow-x: auto;
  overflow-y: hidden;
}

.download-toolbar {
  display: flex;
  min-height: 60px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}

.download-search {
  width: 100%;
  max-width: 520px;
}

.download-table thead th {
  background: var(--gof-surface-subtle);
  color: var(--gof-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.download-table {
  min-width: 1040px;
  table-layout: fixed;
}

.download-file-column {
  width: 29%;
}

.download-release-column {
  width: 34%;
}

.download-size-column {
  width: 9%;
}

.download-published-column {
  width: 14%;
}

.download-checksum-column {
  width: 14%;
}

.download-table tbody td {
  padding-top: 18px;
  padding-bottom: 18px;
  vertical-align: top;
}

.download-table tr[hidden] {
  display: none !important;
}

.download-file-heading {
  display: flex;
  min-width: 220px;
  align-items: flex-start;
  gap: 12px;
}

.download-file-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--gof-radius);
  background: var(--gof-primary-soft);
  color: var(--gof-primary);
}

.download-file-icon .ti {
  font-size: 20px;
}

.download-file-copy,
.download-original-name {
  min-width: 0;
}

.download-original-name {
  max-width: 280px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.download-release-notes {
  min-width: 240px;
  max-width: 480px;
  color: var(--gof-text-secondary);
  line-height: 1.5;
}

.download-release-preview,
.download-release-content {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* 服务端摘要再由浏览器限制为四个视觉行，既兼容显式换行，也避免不同语言的字符宽度
   让同一批记录出现明显高度漂移；完整正文不使用裁切，展开后可连续选择和复制。 */
.download-release-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.download-release-toggle {
  margin-top: 8px;
  padding-right: 8px;
  padding-left: 8px;
  color: var(--gof-primary);
}

.download-checksum {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.download-checksum-value {
  display: block;
  min-width: 0;
  max-width: 112px;
  padding: 4px 6px;
  overflow: hidden;
  border: 1px solid var(--gof-line);
  border-radius: 4px;
  background: var(--gof-surface-subtle);
  color: var(--gof-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  user-select: all;
}

.download-action-column {
  width: 238px;
  min-width: 238px;
  text-align: right;
  white-space: normal;
}

.download-button {
  width: 88px;
  min-height: 36px;
  justify-content: center;
}

/* 管理员动作与下载按钮共用操作列，但上下架/删除需要在窄屏换行；固定最小高度
   让进度更新、确认失败或长文件名都不会改变表格列宽和触控目标尺寸。 */
.download-actions,
.download-manage-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.download-manage-button {
  min-height: 36px;
}

.download-upload-progress {
  min-height: 84px;
}

.download-upload-progress .progress {
  height: 8px;
}

.download-upload-progress .progress-bar {
  transition: width 160ms ease;
}

/* 侧栏切换前的平板宽度同样属于触控场景；下载页的高频操作单独提升到 44px，
   不扩大桌面数据表，也不改变其他页面已经稳定的紧凑密度。 */
@media (max-width: 1023.98px) {
  .download-toolbar .form-control,
  .download-toolbar .btn,
  .download-release-toggle,
  .download-button {
    min-height: 44px;
  }

  .download-checksum .btn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

.api-example {
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--gof-line);
  border-radius: 6px;
  background: var(--gof-surface-subtle);
  color: var(--gof-ink);
  white-space: pre;
}

.modal .alert[hidden],
.alert[hidden] {
  display: none;
}

@media (max-width: 767.98px) {
  .page-header {
    padding-top: 20px;
  }

  .page-header .row > [class*="col-md-4"] {
    width: 100%;
    margin-top: 12px;
  }

  .card-footer .btn {
    width: 100%;
  }

  .account-table,
  .record-table,
  .gift-code-table,
  .download-table {
    min-width: 0 !important;
  }

  .record-table {
    /* thead 隐藏、tbody/row 已转为 block 后，table 自身也必须退出固有列宽算法。
       否则时间等 nowrap 历史样式会把 320px 下的表体撑宽，再被外层卡片无声裁切。 */
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .account-table thead,
  .record-table thead,
  .gift-code-table thead,
  .download-table thead {
    display: none;
  }

  .account-table tbody,
  .account-table tr,
  .account-table td,
  .record-table tbody,
  .record-table tr,
  .record-table td,
  .gift-code-table tbody,
  .gift-code-table tr,
  .gift-code-table td,
  .download-table tbody,
  .download-table tr,
  .download-table td {
    display: block;
    width: 100%;
  }

  .account-table tr,
  .record-table tr,
  .gift-code-table tr,
  .download-table tr {
    padding: 16px;
    border-bottom: 1px solid var(--gof-line);
  }

  .account-table tr:last-child,
  .record-table tr:last-child,
  .gift-code-table tr:last-child,
  .download-table tr:last-child {
    border-bottom: 0;
  }

  .account-table td,
  .record-table td,
  .gift-code-table td,
  .download-table td {
    padding: 5px 0;
    border: 0;
  }

  .account-table td:first-child,
  .record-table td:first-child,
  .gift-code-table td:first-child,
  .download-table td:first-child {
    padding-bottom: 12px;
  }

  .account-table td[data-label],
  .record-table td[data-label],
  .gift-code-table td[data-label],
  .download-table td[data-label] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .account-table td[data-label]::before,
  .record-table td[data-label]::before,
  .gift-code-table td[data-label]::before,
  .download-table td[data-label]::before {
    flex: 0 0 72px;
    color: var(--gof-text-muted);
    content: attr(data-label);
  }

  .download-toolbar {
    align-items: stretch;
  }

  .download-search {
    min-width: 0;
    flex: 1 1 auto;
  }

  .download-file-heading {
    min-width: 0;
    justify-content: flex-end;
    text-align: right;
  }

  .download-release-notes {
    min-width: 0;
    max-width: 70%;
    text-align: right;
  }

  .download-release-preview,
  .download-release-content {
    text-align: left;
  }

  .download-release-toggle {
    margin-left: auto;
  }

  .download-checksum {
    min-width: 0;
    justify-content: flex-end;
  }

  .download-checksum-value {
    max-width: calc(100% - 48px);
    overflow: visible;
    overflow-wrap: anywhere;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
  }

  .download-action-column {
    width: 100%;
    min-width: 0;
    padding-top: 12px !important;
  }

  .download-actions,
  .download-manage-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .download-button {
    width: 100%;
  }

  .account-login {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .account-actions-column {
    width: 100%;
    min-width: 0;
    padding-top: 12px !important;
  }

  .account-actions {
    justify-content: flex-start;
  }

  .permission-summary {
    justify-content: flex-end;
  }

  .api-example {
    font-size: 12px;
  }

  .login-brand {
    font-size: 16px;
  }

  .form-control.license-output {
    min-height: 380px;
    padding: 12px;
    font-size: 14px;
  }

  .license-result .card-body {
    padding-bottom: 20px;
  }

  .tenant-card .card-header {
    align-items: flex-start;
  }

  .tenant-card .card-body {
    padding-top: 18px;
  }

  .record-content-cell {
    min-width: 0;
  }

  .record-tenant-column {
    width: 100%;
    min-width: 0;
  }

  /* 窄屏将搜索与动作拆成稳定的上下两行，筛选按钮占据剩余宽度，清除仍保持图标尺寸。 */
  .record-toolbar {
    align-items: stretch;
    padding: 12px 16px;
  }

  .record-toolbar-search {
    width: 100%;
    max-width: none;
    flex-basis: 100%;
  }

  .record-toolbar-actions {
    width: 100%;
    margin-left: 0;
  }

  .record-filter-toggle {
    flex: 1 1 auto;
  }

  .record-filter-panel {
    padding: 14px 16px 16px;
  }

  .record-secret {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .record-data {
    width: min(112px, 28vw);
    min-width: min(84px, 28vw);
    max-width: 112px;
  }

  .record-actions,
  .gift-code-actions {
    width: 100%;
    padding-top: 12px !important;
    text-align: right;
  }
}

/* 最终页面契约：以下规则位于旧版局部样式之后，统一覆盖各数据页的真实 DOM 标签与触控尺寸。 */
.mobile-field-label {
  display: none;
}

.mobile-field-value {
  min-width: 0;
}

.table-responsive[tabindex="0"] {
  outline: 0;
}

/* 宽表容器可由键盘聚焦后使用方向键滚动；仅在 focus-visible 时恢复清晰焦点环。 */
.table-responsive[tabindex="0"]:focus-visible {
  outline: 2px solid var(--gof-primary);
  outline-offset: 2px;
}

.record-table thead th,
.download-table thead th,
.gift-code-table thead th,
.log-table thead th,
.account-table thead th {
  border-bottom-color: var(--gof-line);
  background: var(--gof-surface-subtle);
  color: var(--gof-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.generator-layout {
  max-width: var(--gof-content-width);
}

.generator-result-body {
  min-height: 386px;
}

.gift-code-toolbar {
  min-height: 64px;
  flex-wrap: wrap;
  gap: 10px;
}

.gift-code-search {
  width: min(100%, 360px);
}

.gift-code-result-count {
  min-width: 72px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.log-detail,
.log-license-result {
  min-width: 220px;
  max-width: 480px;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/*
 * 签发成功、设备纳管结果和业务原因是三个不同维度。结果单元格按固定顺序纵向排列，
 * 既让“部分成功”同时保留授权编号与拒绝原因，也避免 500 字符原因撑破桌面和移动视口。
 */
.log-license-result-stack {
  display: grid;
  min-width: 0;
  gap: 6px;
  align-items: start;
}

.log-license-id,
.log-business-message,
.log-business-code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.log-license-id code,
.log-business-code {
  font-size: 12px;
  word-break: break-word;
}

.log-business-message {
  color: var(--gof-ink);
  line-height: 1.55;
  white-space: pre-wrap;
}

.log-business-code {
  color: var(--gof-text-secondary);
}

.log-detail-wrapper,
.log-detail-preview,
.log-detail-content {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.log-detail-summary {
  justify-content: space-between;
}

.log-detail-preview {
  flex: 1 1 auto;
}

.log-detail-toggle {
  min-width: 68px;
  flex: 0 0 auto;
}

.log-detail-content {
  padding-top: 10px;
  border-top: 1px solid var(--gof-line);
  color: var(--gof-ink);
}

/* 页面内没有重复嵌套卡片；重复数据项仍由同一张表承载，并以行分隔保持扫描效率。 */
.record-table tbody tr[data-record-search]:hover,
.download-table tbody tr[data-download-row]:hover,
.gift-code-table tbody tr[data-gift-code-row]:hover,
.log-table tbody tr[data-log-row]:hover,
.account-table tbody tr[data-account]:hover {
  background: var(--gof-surface-subtle);
}

@media (max-width: 767.98px) {
  .generator-result-body {
    min-height: 330px;
  }

  .form-control.license-output {
    min-height: 220px;
  }

  .account-actions .btn,
  .tenant-actions .btn,
  .record-secret .btn,
  .record-actions .btn,
  .gift-code-actions .btn,
  .download-checksum .btn,
  .log-detail-toggle {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .log-detail-toggle {
    width: auto;
    padding-right: 10px;
    padding-left: 10px;
  }

  .gift-code-toolbar {
    align-items: stretch;
    padding: 12px;
  }

  .gift-code-toolbar .card-title {
    width: 100%;
  }

  .gift-code-search {
    min-width: 0;
    max-width: none;
    flex: 1 1 calc(100% - 54px);
    margin-left: 0 !important;
  }

  .gift-code-result-count {
    width: 100%;
    text-align: left;
  }

  .log-search-toolbar {
    align-items: stretch !important;
    flex-wrap: wrap;
  }

  .log-search-toolbar .input-icon {
    min-width: calc(100% - 54px);
  }

  .log-level-filter {
    width: auto;
    min-height: 44px;
    flex: 1 1 150px;
  }

  .account-table,
  .record-table,
  .gift-code-table,
  .download-table,
  .log-table {
    min-width: 0 !important;
  }

  /* 窄屏下五类数据表已经转换成逐条记录，不再需要横向滚动容器。若继续保留
     overflow:auto，浏览器会为纵向滚动条预留宽度并制造一条无意义的横向滚动条。 */
  .table-responsive {
    overflow: visible;
  }

  .account-table thead,
  .record-table thead,
  .gift-code-table thead,
  .download-table thead,
  .log-table thead {
    display: none;
  }

  .log-table tbody,
  .log-table tr,
  .log-table td {
    display: block;
    width: 100%;
  }

  .account-table tr,
  .record-table tr,
  .gift-code-table tr,
  .download-table tr,
  .log-table tr {
    padding: 16px 14px;
    border-bottom: 1px solid var(--gof-line);
  }

  .log-table tr:last-child {
    border-bottom: 0;
  }

  .log-table td {
    padding: 6px 0;
    border: 0;
  }

  .account-table td[data-label],
  .record-table td[data-label],
  .gift-code-table td[data-label],
  .download-table td[data-label],
  .log-table td[data-label] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }

  .account-table td[data-label]::before,
  .record-table td[data-label]::before,
  .gift-code-table td[data-label]::before,
  .download-table td[data-label]::before,
  .log-table td[data-label]::before {
    display: none;
    content: none;
  }

  .mobile-field-label {
    display: block !important;
    max-width: 42%;
    flex: 0 0 88px;
    color: var(--gof-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
  }

  .mobile-field-value {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    text-align: right;
  }

  /*
   * 桌面固定列进入移动记录卡片后必须恢复为完整字段行。选择、ID 与设备继续沿用
   * 统一的 88px 标签轨道，右侧值区因此和时间、KID、来源保持同一条对齐线。
   */
  .record-table tr {
    /* table-row 改成 block 后浏览器不会稳定继承全局 border-box；显式包含左右内边距，
       避免 320px 视口下每条记录比卡片多出 28px、再被 record-card 静默裁掉。 */
    max-width: 100%;
    box-sizing: border-box;
  }

  .record-table .record-selection-column,
  .record-table .record-id-column,
  .record-table .record-level-column,
  .record-table .record-device-column {
    width: 100%;
    min-width: 0;
    text-align: right;
  }

  .record-table td.record-selection-column {
    align-items: center;
  }

  .record-table td[data-label] .mobile-field-value {
    /* 桌面的 text-nowrap 会继承到时间、租户和来源。移动端恢复正常换行并把值限制在
       88px 标签轨道之外，长时间或长设备编号只能向下扩展，不能越过卡片右边界。 */
    max-width: calc(100% - 102px);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .record-selection-column .record-checkbox-target {
    margin-top: -8px;
    margin-bottom: -8px;
  }

  .record-device-link {
    max-width: min(100%, 210px);
  }

  /* 手机端主页面仍只占一个紧凑任务入口；任务中心自然铺满视口，长任务编号、时间和
     五类计数只在抽屉内部换行，不能把数据记录卡片撑出窄视口。 */
  .record-sync-jobs {
    padding: var(--gof-space-3) 14px;
  }

  .record-sync-jobs-summary {
    align-items: stretch;
    flex-direction: column;
    gap: var(--gof-space-2);
  }

  .record-sync-jobs-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .record-sync-jobs-live {
    margin-right: auto;
    text-align: left;
  }

  .record-sync-jobs-drawer {
    --tblr-offcanvas-width: 100vw;
  }

  .record-sync-jobs-drawer-header,
  .record-sync-job-group-heading {
    padding-right: 14px;
    padding-left: 14px;
  }

  .record-sync-job {
    padding-right: 14px;
    padding-left: 14px;
  }

  .record-sync-job-heading {
    align-items: flex-start;
  }

  /* 批量操作在手机上改为“摘要一行、动作两列”，两个 44px 高按钮不会挤出卡片。 */
  .record-bulk-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: var(--gof-space-3) 14px;
  }

  .record-bulk-summary {
    width: 100%;
    justify-content: space-between;
  }

  .record-bulk-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gof-space-2);
  }

  .record-bulk-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-right: var(--gof-space-2);
    padding-left: var(--gof-space-2);
  }

  /*
   * 移动 footer 按“统计、每页、分页”三段自然换行。页码本身不折成两排，极窄屏
   * 通过局部横向滚动保留稳定顺序，不把整张数据卡片撑出视口。
   */
  .record-footer {
    align-items: stretch;
    flex-direction: column;
    padding: var(--gof-space-3) 14px;
  }

  .record-count,
  .record-pagination-controls {
    width: 100%;
    flex-basis: auto;
  }

  .record-pagination-controls {
    justify-content: flex-start;
  }

  .record-page-size {
    min-height: 44px;
  }

  .record-pagination-controls nav {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .record-pagination {
    width: max-content;
    min-width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .record-pagination .page-link {
    min-width: 44px;
    min-height: 44px;
  }

  .record-secret,
  .download-checksum,
  .download-file-heading,
  .log-detail-wrapper,
  .log-license-result-stack {
    max-width: calc(100% - 102px);
    justify-content: flex-end;
  }

  .record-data {
    width: min(132px, 35vw);
    max-width: 132px;
  }

  .download-release-notes {
    max-width: calc(100% - 102px);
  }

  .log-detail,
  .log-license-result {
    min-width: 0;
    max-width: none;
  }

  .log-runtime-message {
    min-width: 0;
    max-width: none;
  }

  .log-runtime-message-stack {
    width: 100%;
    max-width: calc(100% - 102px);
    justify-items: end;
  }

  .log-runtime-message pre {
    max-height: 320px;
    text-align: left;
  }

  .log-copy-button {
    min-height: 44px;
  }

  .log-detail-summary {
    align-items: flex-start !important;
    justify-content: flex-end;
  }

  .log-detail-preview,
  .log-detail-content,
  .log-business-message {
    text-align: left;
  }

  /* 结果整体贴近右侧值轨道，较长的业务原因自身仍左对齐，保证连续中文可快速阅读。 */
  .log-license-result-stack {
    justify-items: end;
    text-align: right;
  }

  /* 签发结果中的展开区已经位于右侧值轨道内，不能再次扣除移动端字段标签宽度。 */
  .log-license-result-stack .log-detail-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .record-actions .mobile-field-value,
  .gift-code-actions .mobile-field-value {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
  }

  .record-actions,
  .gift-code-actions,
  .download-action-column {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .download-button {
    min-height: 44px;
  }

  .modal-footer {
    gap: 8px;
  }

  .modal-footer .btn {
    min-width: 96px;
  }
}

@media (max-width: 399.98px) {
  .app-brand-mobile strong {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-field-label {
    flex-basis: 78px;
  }

  .download-table .mobile-field-label {
    /* 下载页的 64px 轨道仍能完整容纳“发布时间”和“SHA-256”，并为版本号、
       长文件名及完整校验值让出空间；其他数据页继续使用原有 78px 标签宽度。 */
    max-width: 64px;
    flex-basis: 64px;
  }

  /* 极窄屏仅缩小装饰性文件图标，不缩小任何可点击控件；配合更紧凑的 8px 间距，
     版本徽标可以完整容纳最长的现有中文区服版本号。 */
  .download-file-heading {
    gap: 8px;
  }

  .download-file-icon {
    width: 32px;
    height: 32px;
  }

  .download-file-icon .ti {
    font-size: 18px;
  }

  .download-file-copy .badge {
    /* Tabler 默认徽标内边距在 320px 下会把最长版本号挤掉约 2px；仅收紧左右
       留白，不降低 12px 标签字号，也不允许版本字符串拆成难读的两行。 */
    padding-right: 4px;
    padding-left: 4px;
  }

  .record-secret,
  .download-checksum,
  .download-file-heading,
  .download-release-notes,
  .log-detail-wrapper {
    max-width: calc(100% - 92px);
  }

  .download-table .download-checksum,
  .download-table .download-file-heading,
  .download-table .download-release-notes {
    max-width: calc(100% - 78px);
  }

  .record-data {
    width: min(106px, 33vw);
    max-width: 106px;
  }

  /* 320px 视口扣除卡片内边距后不足以居中完整页码组，从左侧开始滚动更容易发现后续页。 */
  .record-pagination {
    justify-content: flex-start;
  }
}

/*
 * 账号页是高频运维工作台：使用紧凑字号、细分隔和单一操作蓝建立层级，
 * 不依赖悬浮卡、大圆角或非语义颜色。普通成员的自助页继续收敛在 800px 内；
 * 管理者的卡片则由数据页容器统一约束，便于在 1440px 桌面上快速扫描。
 */
.account-self-service-layout {
  max-width: 800px;
}

.account-page-header {
  padding-top: 30px;
}

.account-page-intro,
.account-page-heading {
  min-width: 0;
}

.account-page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.account-page-heading {
  max-width: 760px;
}

.account-page-description {
  max-width: 680px;
  margin: 7px 0 0;
  color: var(--gof-text-secondary);
  font-size: 14px;
}

.account-panel,
.account-workspace,
.account-self-card {
  max-width: none;
  overflow: hidden;
  border-color: #cfd8e2;
}

.account-self-card {
  box-shadow: 0 1px 2px rgb(24 36 51 / 4%);
}

/*
 * 语义化标题、描述和稳定间距构成分区阅读轴：无论账号是 owner、管理员
 * 还是普通成员，都会先进入“本人安全”，再进入可选的成员管理。
 */
.account-self-header,
.account-management-header {
  min-height: 88px;
  padding: 18px 20px;
  background: var(--gof-surface);
}

.account-self-header {
  align-items: center;
}

.account-section-heading {
  min-width: 0;
}

.account-section-heading .card-title {
  margin-top: 0;
  font-size: 17px;
}

.account-section-description {
  max-width: 640px;
  margin: 4px 0 0;
  color: var(--gof-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/*
 * 登录身份、权限和安全操作组成一张连续数据表面。头像是定位辅助，不使用
 * 强品牌色；长显示名、邮箱式账号和租户名都可折行，避免它们挤压右侧会话提示。
 */
.account-self-summary {
  display: flex;
  min-width: 0;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-top: 1px solid var(--gof-line);
  background: #f8fafc;
}

.account-self-primary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.account-self-primary .avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid #cbd5df;
  border-radius: var(--gof-radius);
  background: #e8edf2;
  color: var(--gof-ink);
  font-weight: 750;
}

.account-self-caption {
  min-width: 0;
  margin-bottom: 2px;
  color: var(--gof-text-muted);
  font-size: 11px;
  font-weight: 650;
}

.account-self-session {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding-left: 20px;
  border-left: 1px solid var(--gof-line);
  color: var(--gof-text-secondary);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.account-self-session .ti,
.account-filter-heading .ti {
  color: var(--gof-primary-active);
  font-size: 16px;
}

.account-self-identity {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  font-size: 13px;
}

/*
 * 租户名允许 64 个任意字符；这里显式允许连续 ASCII/编号断行，避免身份摘要和
 * 工作区元数据在 320px 下被卡片 overflow:hidden 裁掉。
 */
.account-self-tenant-name,
.account-workspace-tenant-name {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/*
 * 概览区使用四列定义表结构，而不分拆成独立 KPI 卡片。额外权限列获得双倍弹性宽度，
 * 在文案增长或显示多个权限时先自然换行，不会导致状态文字逐字竖排。
 */
.account-self-overview {
  display: grid;
  grid-template-columns: minmax(112px, 0.8fr) minmax(240px, 1.8fr) minmax(112px, 0.8fr) minmax(112px, 0.8fr);
  align-items: stretch;
  padding: 0;
  border-top: 1px solid var(--gof-line);
  background: var(--gof-surface);
}

.account-self-overview-item {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 4px;
  padding: 13px 20px;
  border-right: 1px solid var(--gof-line);
}

.account-self-overview-item:last-child {
  border-right: 0;
}

.account-self-permissions {
  min-width: 0;
}

.account-self-overview-label {
  color: var(--gof-text-muted);
  font-size: 11px;
  font-weight: 650;
}

.account-self-overview-value {
  display: flex;
  min-width: 0;
  min-height: 22px;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: var(--gof-ink);
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.account-setting-list {
  border-top: 1px solid var(--gof-line);
}

.account-setting-row {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px;
}

.account-setting-row + .account-setting-row {
  border-top: 1px solid var(--gof-line);
}

.account-setting-copy {
  min-width: 0;
}

.account-setting-row .btn {
  min-width: 136px;
  flex: 0 0 auto;
}

/*
 * 成员工作台始终固定在单一租户上下文。租户选择与“添加成员”是标题区的唯一主操作组；
 * 总数、筛选结果数使用文本元数据，不创建悬浮统计卡，从而保持数据表的扫描连续性。
 */
.account-management-header {
  align-items: center;
}

.account-workspace-heading {
  min-width: 260px;
  flex: 1 1 420px;
}

.account-workspace-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 5px;
  color: var(--gof-text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.account-workspace-tenant,
.account-filter-heading {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.account-management-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}

.account-tenant-switch {
  width: min(320px, 36vw);
}

.account-filter-panel {
  padding: 14px 20px 16px;
  border-bottom: 1px solid var(--gof-line);
  background: #f5f7f9;
}

.account-filter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.account-filter-heading {
  color: var(--gof-ink);
  font-size: 13px;
  font-weight: 700;
}

.account-filter-meta {
  color: var(--gof-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.account-filter-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.7fr) repeat(4, minmax(128px, 1fr)) max-content;
  align-items: end;
  gap: 10px;
}

.account-filter-field {
  min-width: 0;
}

.account-filter-field .input-icon,
.account-filter-field .form-control,
.account-filter-field .form-select {
  width: 100%;
  min-width: 0;
}

.account-filter-panel .form-label {
  margin-bottom: 5px;
  color: var(--gof-text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.account-filter-actions {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.account-data-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gof-ink);
  white-space: nowrap;
}

/* 使用深蓝文字配浅蓝表面，确保小号权限徽标在浅色背景下仍有足够文本对比度。 */
.account-extra-permission {
  border: 1px solid #b9d4ef;
  border-radius: var(--gof-radius-sm);
  background: var(--gof-primary-soft);
  color: var(--gof-primary-active);
  font-weight: 650;
}

.account-self-card .status-green,
.account-management-card .status-green,
.tenant-card .status-green {
  color: #0b6b36;
}

.account-management-card .status-orange {
  color: #805500;
}

.account-self-card .status-red,
.account-management-card .status-red,
.tenant-card .status-red {
  color: #9f231b;
}

.permission-section {
  padding: 12px;
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  background: var(--gof-surface-subtle);
}

.permission-section .permission-option {
  background: var(--gof-surface);
}

/*
 * 表格与筛选区直接相邻，不再添加第二层卡片外观。表头使用中性浅灰区分字段，
 * 行悬停只轻微提高蓝色明度；两者都不改变状态色的语义。
 */
.account-management-card .table-responsive {
  width: 100%;
  max-width: 100%;
  background: var(--gof-surface);
  overscroll-behavior-inline: contain;
}

.account-table {
  margin-bottom: 0;
}

.account-table thead th {
  padding: 10px 16px;
  border-bottom-color: #cfd8e2;
  background: #f5f7f9;
  color: var(--gof-text-secondary);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

.account-table tbody td {
  padding: 12px 16px;
  border-bottom-color: #e4e9ee;
}

.account-table tbody tr:last-child td {
  border-bottom: 0;
}

.account-table tbody tr[data-account]:hover {
  background: #f6f9fc;
}

.account-activity {
  display: grid;
  min-width: 150px;
  gap: 3px;
}

.account-activity-item {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  color: var(--gof-text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.account-activity-item:first-child {
  color: var(--gof-ink);
}

/* 活动列的“登录/更新/IP”是字段标识而不是状态，因此使用中性弱文本，值仍保持主要扫描对比。 */
.account-activity-label {
  color: var(--gof-text-muted);
  font-size: 11px;
  font-weight: 650;
}

.account-empty-state {
  display: grid;
  min-height: 248px;
  align-content: center;
  justify-items: center;
  border-bottom: 1px solid var(--gof-line);
  background: var(--gof-surface);
}

.account-empty-state .empty-icon {
  color: var(--gof-text-muted);
}

.account-pagination-footer {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 20px;
  border-top: 1px solid var(--gof-line);
  background: #fafbfc;
  font-variant-numeric: tabular-nums;
}

.account-pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 桌面表格隐藏重复字段标签；状态列和状态文本都禁止中文逐字折行。 */
.account-field-label {
  display: none;
}

.account-field-value {
  min-width: 0;
}

.account-status-column {
  width: 92px;
  min-width: 92px;
  white-space: nowrap;
}

.account-table .status {
  min-width: max-content;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/*
 * 1024px 附近带侧栏的主区不足以可靠承载完整成员表，因此在 1280px 以下转为
 * 两列字段记录。这个中间态仍保留运维桌面的扫描密度；到手机宽度才改为单列，
 * DOM 顺序全程不变，键盘和读屏仍按账号、权限、状态、操作的顺序访问。
 */
@media (max-width: 1279.98px) {
  .account-self-overview {
    grid-template-columns: minmax(112px, 0.9fr) minmax(220px, 1.8fr) repeat(2, minmax(112px, 0.9fr));
  }

  .account-filter-grid {
    grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr));
  }

  .account-filter-actions {
    justify-content: flex-start;
  }

  .account-management-card .table-responsive {
    overflow: visible;
  }

  .account-table,
  .account-table tbody,
  .account-table td {
    display: block;
    width: 100%;
  }

  .account-table {
    min-width: 0 !important;
  }

  .account-table thead {
    display: none;
  }

  .account-table tr {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--gof-line);
  }

  .account-table tr:last-child {
    border-bottom: 0;
  }

  .account-table td,
  .account-table td:first-child {
    padding: 6px 0;
    border: 0;
  }

  .account-table td:first-child,
  .account-table .account-actions-column {
    grid-column: 1 / -1;
  }

  .account-table td:first-child {
    padding-bottom: 11px;
  }

  .account-field-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .account-field-label {
    display: block;
    flex: 0 0 96px;
    color: var(--gof-text-muted);
    font-size: 12px;
    font-weight: 550;
    line-height: 1.5;
  }

  .account-field-value {
    max-width: calc(100% - 112px);
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .account-status-column,
  .account-actions-column {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .permission-summary,
  .account-actions {
    justify-content: flex-end;
  }

  .account-action-row {
    align-items: center;
  }

  .account-activity {
    min-width: 0;
  }

  .account-actions .btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

@media (max-width: 767.98px) {
  .account-page-header {
    padding-top: 20px;
  }

  .account-page-description {
    margin-top: 5px;
    font-size: 13px;
  }

  .account-self-header,
  .account-management-header {
    min-height: 0;
    padding: 15px 14px;
  }

  .account-self-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  .account-self-primary {
    width: 100%;
    align-items: flex-start;
  }

  .account-self-session {
    width: 100%;
    padding: 9px 0 0;
    border-top: 1px solid var(--gof-line);
    border-left: 0;
    text-align: left;
  }

  .account-self-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-self-overview-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gof-line);
  }

  .account-self-overview-item:nth-child(2n) {
    border-right: 0;
  }

  .account-self-overview-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .account-management-header,
  .account-management-actions {
    align-items: stretch;
  }

  /*
   * 工作区标题在桌面保留稳定扫描宽度；进入手机断点后必须允许收缩到卡片内容区，
   * 否则桌面的 260px 下限叠加标题内边距，会在 320px 视口预留滚动条时产生裁切。
   */
  .account-workspace-heading {
    min-width: 0;
  }

  .account-management-actions {
    width: 100%;
    flex-direction: column;
  }

  .account-tenant-switch {
    width: 100%;
  }

  .account-management-actions > .btn,
  .account-management-actions > a.btn {
    width: 100%;
    min-height: 44px;
  }

  .account-filter-panel {
    padding: 13px 14px 14px;
  }

  .account-filter-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .account-filter-meta {
    text-align: left;
  }

  .account-filter-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .account-filter-field .form-control,
  .account-filter-field .form-select,
  .account-filter-actions .btn,
  .account-filter-actions .btn-link {
    min-height: 44px;
  }

  .account-pagination-footer,
  .account-pagination-controls {
    align-items: stretch;
  }

  .account-pagination-footer {
    flex-direction: column;
    padding: 12px 14px;
  }

  .account-pagination-controls {
    justify-content: space-between;
  }

  /*
   * 移动端分页和每页数量同样属于高频导航，不因沿用 pagination-sm 而缩回桌面尺寸。
   * 页码采用内部 44px 点击面；极窄屏由分页导航自身横向滚动，禁止把整页撑宽。
   */
  .account-pagination-controls .dropdown-toggle,
  .account-pagination-controls .page-link {
    min-width: 44px;
    min-height: 44px;
  }

  .account-pagination-controls .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .account-pagination-controls .dropdown-item {
    display: flex;
    min-height: 44px;
    align-items: center;
  }

  /*
   * 账号表单在移动端使用全屏附近的模态层，关闭与页脚操作都必须达到 44px；
   * 不能让最关键的取消路径退回 Tabler 默认的小图标点击面。
   */
  #account-modal .btn-close,
  #password-modal .btn-close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    background-position: center;
  }

  #account-modal .modal-footer .btn,
  #password-modal .modal-footer .btn {
    min-height: 44px;
  }

  /*
   * 登录状态开关的视觉滑块较小，但整行标签仍是实际点击目标；扩展到 44px 后，
   * 用户无需精确点中滑块，同时保持 checkbox 与文案在同一基线上。
   */
  #active-field .form-check.form-switch {
    min-height: 44px;
    align-items: center;
  }

  .account-setting-row {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }

  .account-setting-row .btn {
    width: 100%;
    min-height: 44px;
  }

  .account-table tr {
    display: block;
    max-width: 100%;
    padding: 15px 14px;
  }

  /*
   * 移动设备没有可靠的悬停提示，因此姓名不能沿用桌面的省略号。允许长中文或
   * 连续英文在记录内部断行，桌面表格仍继续使用 text-truncate 保持扫描密度。
   */
  .account-self-name,
  .account-member-name {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .account-table td:first-child,
  .account-table .account-actions-column {
    grid-column: auto;
  }

  .account-field-label {
    flex-basis: 88px;
  }

  .account-field-value {
    max-width: calc(100% - 104px);
  }

  .account-activity-item {
    text-align: right;
  }

  .account-activity {
    justify-items: end;
  }

}

@media (max-width: 399.98px) {
  /* 390px 及 320px 下将权限概览改为单列，每个字段都保留完整标签和值，不制造页面级横向滚动。 */
  .account-self-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-self-overview-item,
  .account-self-overview-item:nth-child(2n),
  .account-self-overview-item:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--gof-line);
  }

  .account-self-overview-item:last-child {
    border-bottom: 0;
  }

  .account-self-primary .avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .account-self-identity {
    gap: 2px 6px;
  }

  /* 极窄屏上隐藏纯分隔点，避免姓名换行后它独占一行；账号与租户文字本身仍完整保留。 */
  .account-self-separator {
    display: none;
  }

  .account-filter-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    white-space: normal;
  }

  .account-filter-actions .btn,
  .account-filter-actions .btn-link {
    width: 100%;
  }

  .account-pagination-controls {
    flex-direction: column;
  }

  .account-pagination-controls nav {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .account-pagination-controls .pagination {
    flex-wrap: nowrap;
  }

  .account-field-row {
    gap: 12px;
  }

  .account-field-label {
    flex-basis: 78px;
  }

  .account-field-value {
    max-width: calc(100% - 90px);
  }
}

/*
 * 设备页沿用 Tabler 的表格卡片和中性运维色彩。工具栏允许自然换行，设备数量、
 * 搜索框和状态筛选在桌面保持稳定宽度，不会因轮询文本变化挤压主表格。
 */
.device-pool-overview {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.device-pool-overview-heading {
  min-width: 160px;
}

/*
 * 资料池数量属于同一组运维摘要，因此使用紧凑定义列表和细分隔线，不拆成三张悬浮卡片。
 * 数字采用等宽表格字形，导入或范围切换后位数变化时不会造成标签和分隔线抖动。
 */
.device-pool-metrics {
  display: grid;
  width: min(100%, 420px);
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  margin: 0;
}

.device-pool-metrics > div {
  min-width: 0;
  padding: 0 20px;
  border-left: 1px solid var(--gof-line);
}

.device-pool-metrics dt {
  margin-bottom: 4px;
  color: var(--gof-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.device-pool-metrics dd {
  margin: 0;
  color: var(--gof-ink);
  font-size: 20px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.device-toolbar {
  min-height: 72px;
  flex-wrap: wrap;
  gap: 10px;
}

.device-toolbar-title {
  min-width: 176px;
  align-self: flex-start;
  padding-top: 22px;
}

.device-toolbar-search {
  min-width: 248px;
}

/*
 * 筛选栏按“关键词 + 四个业务维度 + 排序 + 清除”排列，并使用显式标签承载含义。
 * 排序在桌面也保持可见，便于与表头互相确认；容器自然换行，不依赖固定坐标，
 * 服务端分页后每次筛选或排序都会形成可复制的 URL。
 */
.device-filter-controls {
  display: grid;
  min-width: 0;
  /*
   * 排序选项比状态枚举更长，单独给 168px 基线；四个筛选列继续共享剩余空间。
   * 在带 228px 侧栏的 1440px 视口中仍能单行容纳，当前值不会被原生 select 截断。
   */
  grid-template-columns:
    minmax(248px, 1.6fr)
    repeat(4, minmax(128px, 1fr))
    minmax(168px, 1.15fr)
    auto;
  align-items: end;
  flex: 1 1 960px;
  gap: var(--gof-space-2);
}

.device-filter-field {
  min-width: 0;
}

.device-filter-field .form-label {
  margin-bottom: 4px;
  color: var(--gof-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.device-filter-field .form-select,
.device-filter-field .form-control,
.device-filter-field .input-icon {
  width: 100%;
}

/*
 * 组合排序值的最长中文 option 不能反向撑开 CSS Grid 轨道。显式允许 select 收缩，
 * 浏览器会在可用宽度内绘制原生下拉箭头；到 320px 单列时仍不产生整页横向滚动。
 */
.device-sort-field,
.device-sort-field .form-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.device-filter-action .btn {
  min-height: 36px;
  white-space: nowrap;
}

/*
 * 批量工具栏位于筛选与结果之间，明确表达“只操作当前页”。它使用固定可见的标准
 * 复选框和按钮，不依赖悬浮层；选择数变化时中间状态区可伸缩，不会推动右侧动作换位。
 */
.device-batch-toolbar {
  display: flex;
  min-height: 60px;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gof-space-3);
  padding: var(--gof-space-2) var(--gof-space-4);
  border-bottom: 1px solid var(--gof-line);
  background: var(--gof-surface-subtle);
}

.device-batch-select-all {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--gof-space-2);
  margin: 0;
  color: var(--gof-ink);
  font-weight: 600;
  cursor: pointer;
}

.device-batch-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gof-space-2);
}

.device-batch-actions .btn {
  min-height: 44px;
}

.device-empty-content {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  gap: var(--gof-space-3);
}

/*
 * 设备 footer 复用 Tabler pagination 视觉，但统计、每页数量和页码保持独立语义。
 * 总页数变化时页码可换行；移动端再收敛为横向局部滚动，不撑破整张卡片。
 */
.device-list-footer {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gof-space-3);
  padding: var(--gof-space-3) var(--gof-space-4);
}

.device-list-count {
  min-width: 0;
  flex: 1 1 280px;
  font-variant-numeric: tabular-nums;
}

.device-pagination-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--gof-space-2);
}

.device-page-size-label {
  margin: 0;
  color: var(--gof-text-muted);
  white-space: nowrap;
}

.device-page-size {
  width: 92px;
  min-width: 92px;
}

.device-pagination {
  justify-content: flex-end;
}

.device-pagination .page-link {
  display: inline-grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  padding: var(--gof-space-1) var(--gof-space-2);
  text-align: center;
}

.device-table {
  min-width: 1300px;
}

.device-table thead th {
  border-bottom-color: var(--gof-line);
  background: var(--gof-surface-subtle);
  color: var(--gof-text-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

/*
 * 四个可排序列使用真实 button 提供键盘与触控语义。两列网格为文字和 18px 图标预留
 * 恒定轨道，切换 ti-arrows-sort/ti-sort-* 时不会改变列宽；44px 高度满足键盘焦点与
 * 触控目标要求，同时沿用表头中性色和既有 focus-visible 全局样式。
 */
.device-sort-button {
  appearance: none;
  display: inline-grid;
  min-height: 44px;
  grid-template-columns: minmax(0, max-content) 18px;
  align-items: center;
  justify-content: start;
  gap: var(--gof-space-1);
  padding: 0 var(--gof-space-1);
  border: 0;
  border-radius: var(--gof-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.device-sort-button:hover {
  background: var(--gof-primary-soft);
  color: var(--gof-primary-hover);
}

.device-sort-button:disabled {
  background: transparent;
  color: var(--gof-text-muted);
  cursor: wait;
  opacity: 0.65;
}

.device-sort-button [data-device-sort-icon] {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  font-size: 16px;
  line-height: 1;
}

.device-table tbody tr[data-device-row]:hover {
  background: var(--gof-surface-subtle);
}

.device-selection-column,
.device-selection-cell {
  width: 56px;
  min-width: 56px;
  text-align: center;
}

/* label 承担完整点击目标，原生 checkbox 保留浏览器焦点、键盘和混合态语义。 */
.device-select-label {
  display: inline-grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  margin: -6px 0;
  cursor: pointer;
}

.device-select-label .device-select:disabled {
  opacity: 0.5;
}

.device-actions-column {
  width: 152px;
  min-width: 152px;
}

.device-actions {
  display: flex;
  min-height: 34px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.device-field-label {
  display: none;
}

.device-field-value {
  min-width: 0;
}

/*
 * 列表进度把主状态与完成计数分成两行，避免“第10/10区 · KID 123456”在表格中挤压
 * 相邻列；移动端继承右对齐，但两个文本仍作为一个语义组连续阅读。
 */
.device-zone-progress {
  display: inline-flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.device-zone-progress-detail {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/*
 * 练区设置沿用 Tabler 弹窗与中性分隔线，不再堆叠独立卡片。摘要、槽位和操作顺序
 * 与业务决策顺序一致：先核对权威快照，再配置连续 KID，最后保存或暂停。
 */
.device-zone-training-loading {
  min-height: 240px;
  align-items: center;
  justify-content: center;
  gap: var(--gof-space-2);
}

.device-zone-training-loading:not([hidden]) {
  display: flex;
}

.device-zone-training-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gof-space-4);
  margin-bottom: var(--gof-space-4);
}

.device-zone-training-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gof-space-3);
  margin: 0 0 var(--gof-space-4);
  padding: var(--gof-space-4);
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  background: var(--gof-surface-subtle);
}

.device-zone-training-summary > div {
  min-width: 0;
}

.device-zone-training-summary dt {
  margin-bottom: 4px;
  color: var(--gof-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.device-zone-training-summary dd {
  margin: 0;
  color: var(--gof-ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.device-zone-training-empty {
  border-top: 1px solid var(--gof-line);
  border-bottom: 1px solid var(--gof-line);
}

.device-zone-training-empty[hidden],
.device-zone-training-plan[hidden] {
  display: none;
}

/*
 * 新周期门禁沿用 Tabler alert 语义，安全引用保持可选择和等宽换行。面板在门禁关闭时
 * 也能呈现服务端原因，但绝不为账号、Token 或角色原文预留宽屏展示区。
 */
.device-zone-new-cycle code {
  color: inherit;
  overflow-wrap: anywhere;
}

.device-zone-training-plan {
  padding-top: var(--gof-space-4);
  border-top: 1px solid var(--gof-line);
}

.device-zone-training-plan-heading {
  margin-bottom: var(--gof-space-3);
}

/*
 * 首次接管进度使用一块独立的轻量表单区域，避免把“从哪一区开始”藏进十行 KID
 * 输入里。它只在服务端返回未配置计划时显示，保存后自然由前端隐藏，不会与已锁定
 * 槽位共用一个可编辑视觉层级。
 */
.device-zone-training-start-panel {
  max-width: 520px;
  margin-bottom: var(--gof-space-4);
  padding: var(--gof-space-3);
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  background: var(--gof-surface-subtle);
}

.device-zone-training-start-panel[hidden] {
  display: none;
}

.device-zone-training-start-panel .form-hint {
  margin-top: var(--gof-space-2);
}

.device-zone-training-slots {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gof-line);
  list-style: none;
}

.device-zone-training-slot {
  display: grid;
  grid-template-columns: 84px 112px minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  gap: var(--gof-space-3);
  padding: var(--gof-space-3) 0;
  border-bottom: 1px solid var(--gof-line);
}

.device-zone-training-slot-number {
  color: var(--gof-ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.device-zone-training-slot-status {
  justify-self: start;
}

.device-zone-training-slot-kid,
.device-zone-training-kid-input {
  min-width: 0;
}

.device-zone-training-slot-kid .form-label {
  color: var(--gof-text-muted);
  font-size: 12px;
}

.device-zone-training-slot-value {
  min-height: 32px;
  padding: 5px 0;
  overflow-wrap: anywhere;
}

.device-zone-training-footer {
  align-items: center;
}

/*
 * 批量弹窗把目标设备、逐台结果和共同 KID 输入分成两段无边框区域。结果行保持稳定
 * 两列，错误文案可换行；输入在桌面使用三列提高批量录入效率，窄屏再逐级收敛。
 */
.device-zone-batch-section + .device-zone-batch-section {
  margin-top: var(--gof-space-5);
  padding-top: var(--gof-space-4);
  border-top: 1px solid var(--gof-line);
}

.device-zone-batch-devices {
  max-height: 260px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gof-line);
  overflow-y: auto;
  list-style: none;
}

.device-zone-batch-device {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
  align-items: center;
  gap: var(--gof-space-3);
  padding: var(--gof-space-3) 0;
  border-bottom: 1px solid var(--gof-line);
}

.device-zone-batch-device-summary,
.device-zone-batch-device-outcome {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.device-zone-batch-device-outcome {
  align-items: flex-end;
  text-align: right;
}

.device-zone-batch-device-summary > span,
.device-zone-batch-device-outcome > span {
  overflow-wrap: anywhere;
}

.device-zone-batch-kid-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gof-space-3);
}

.device-zone-batch-kid-grid > div {
  min-width: 0;
}

#device-zone-batch-submit {
  min-height: 44px;
}

/*
 * 时间线筛选保持紧凑网格，设备条件不开放输入并由弹窗上下文固定。事件使用单轴线和
 * 定义列表表达结构化事实，在宽屏可横向核对，窄屏自动收敛为单列而不截断错误码。
 */
.device-zone-timeline {
  margin-top: var(--gof-space-5);
  padding-top: var(--gof-space-4);
  border-top: 1px solid var(--gof-line);
}

.device-zone-timeline-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--gof-space-3);
}

.device-zone-timeline-filters > div {
  min-width: 0;
}

.device-zone-timeline-filter-action .btn {
  width: 100%;
}

.device-zone-timeline-loading {
  min-height: 144px;
  align-items: center;
  justify-content: center;
  gap: var(--gof-space-2);
}

.device-zone-timeline-loading:not([hidden]) {
  display: flex;
}

.device-zone-timeline-empty[hidden] {
  display: none;
}

.device-zone-timeline-events {
  margin: var(--gof-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.device-zone-timeline-event {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--gof-space-3);
  min-width: 0;
}

.device-zone-timeline-marker {
  position: relative;
}

.device-zone-timeline-marker::before {
  position: absolute;
  top: 8px;
  left: 5px;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tblr-primary);
  content: "";
}

.device-zone-timeline-marker::after {
  position: absolute;
  top: 15px;
  bottom: -8px;
  left: 8px;
  width: 1px;
  background: var(--gof-line);
  content: "";
}

.device-zone-timeline-event:last-child .device-zone-timeline-marker::after {
  display: none;
}

.device-zone-timeline-event-content {
  min-width: 0;
  padding: 0 0 var(--gof-space-4);
}

.device-zone-timeline-event-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gof-space-3);
}

.device-zone-timeline-event-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px var(--gof-space-3);
  margin: var(--gof-space-2) 0 0;
}

.device-zone-timeline-event-details > div {
  min-width: 0;
}

.device-zone-timeline-event-details dt {
  color: var(--gof-text-muted);
  font-size: 11px;
  font-weight: 650;
}

.device-zone-timeline-event-details dd {
  margin: 2px 0 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.device-zone-timeline-identifier dd {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--gof-space-2);
}

.device-zone-timeline-identifier code {
  min-width: 0;
  overflow-wrap: anywhere;
  user-select: text;
}

.device-zone-timeline-copy {
  min-width: 44px;
  min-height: 32px;
  flex: 0 0 auto;
}

/*
 * 最新日志弹窗沿用后台的中性数据面板，不模拟装饰性终端。工具栏尺寸稳定；正文用
 * 等宽字体保留设备换行，并限制在弹窗内部滚动，长函数名或无空格文本也不会撑宽页面。
 */
.device-log-toolbar {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: var(--gof-space-3);
}

.device-log-toolbar > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.device-log-loading {
  display: flex;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  gap: var(--gof-space-2);
}

.device-log-loading[hidden] {
  display: none;
}

.device-log-empty {
  display: flex;
  min-height: 240px;
  align-items: center;
  justify-content: center;
}

.device-log-empty[hidden] {
  display: none;
}

.device-log-degraded {
  display: flex;
  align-items: flex-start;
  gap: var(--gof-space-2);
}

.device-log-degraded[hidden] {
  display: none;
}

.device-log-degraded .ti {
  margin-top: 2px;
  flex: 0 0 auto;
}

.device-account-snapshot {
  padding: var(--gof-space-4) 0;
  border-top: 1px solid var(--gof-line);
  border-bottom: 1px solid var(--gof-line);
}

.device-account-snapshot[hidden],
.device-account-push-confirm[hidden] {
  display: none;
}

.device-account-snapshot-title {
  margin: 0 0 var(--gof-space-3);
  font-size: 15px;
  font-weight: 600;
}

.device-account-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gof-space-3) var(--gof-space-5);
  margin: 0 0 var(--gof-space-3);
}

.device-account-snapshot-grid > div {
  min-width: 0;
}

.device-account-snapshot-grid dt {
  margin-bottom: 4px;
  color: var(--gof-muted);
  font-size: 12px;
  font-weight: 500;
}

.device-account-snapshot-grid dd {
  min-width: 0;
  margin: 0;
}

.device-account-token-row {
  grid-column: 1 / -1;
}

.device-account-token-row code {
  display: block;
  max-height: 112px;
  padding: var(--gof-space-2) var(--gof-space-3);
  overflow: auto;
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  background: var(--gof-surface-subtle);
  color: var(--gof-ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}

.device-account-push-confirm {
  /*
   * 推送确认是弹窗内的二次操作面板，沿用 Tabler 的完整弱边框与项目统一圆角。
   * 不使用单边粗主色条，避免将普通确认步骤误呈现为导航选中项或高危告警。
   */
  padding: var(--gof-space-3);
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  background: var(--gof-surface-subtle);
}

.device-log-output {
  width: 100%;
  height: min(56vh, 560px);
  min-height: 240px;
  margin: var(--gof-space-3) 0 0;
  padding: var(--gof-space-4);
  overflow: auto;
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  background: var(--gof-surface-subtle);
  color: var(--gof-ink);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  tab-size: 2;
  white-space: pre-wrap;
  word-break: break-word;
  overscroll-behavior: contain;
}

.device-log-output[hidden] {
  display: none;
}

/*
 * 身份任务摘要和完整资料使用定义列表表达字段关系。完整值不做遮罩或视觉模糊，
 * 仅通过弱边框和等宽数字增强核对效率；长身份证号仍可在窄屏完整换行显示。
 */
.device-identity-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  background: var(--gof-surface-subtle);
}

.device-identity-summary > div,
.device-identity-detail-grid > div {
  min-width: 0;
}

/*
 * 任务编号是不可截断的审计关联键；宽屏让它占两列，正常的 32 位 ID 无需换行即可完整
 * 阅读。仍保留任意位置换行，确保将来更长的服务端编号不会溢出并压住相邻状态字段。
 */
.device-identity-summary-reference {
  grid-column: span 2;
}

.device-identity-summary dt,
.device-identity-detail-grid dt {
  margin-bottom: 6px;
  color: var(--gof-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.device-identity-summary dd,
.device-identity-detail-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.device-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--gof-line);
}

.device-identity-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.device-sensitive-value {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--gof-line);
  border-radius: var(--gof-radius);
  background: var(--gof-surface-subtle);
  color: var(--gof-ink);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.device-identity-loading {
  min-height: 96px;
  align-items: center;
  justify-content: center;
}

.device-identity-loading:not([hidden]) {
  display: flex;
}

.device-identity-single-field {
  width: min(100%, 420px);
}

/*
 * 获取方式是创建任务前的二选一决策。fieldset 去掉浏览器默认边框后仍保留 legend
 * 语义；按钮组允许在窄屏换行，最长中文标签不会把弹窗撑出视口。
 */
.device-identity-mode-selector {
  min-width: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.device-identity-mode-selector .btn-group {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

/*
 * 身份资料已失效且池中暂无替代项时沿用普通等待区的分隔层级，但不显示旋转加载图标，
 * 避免让用户误以为当前请求仍未结束；后台会按配置周期只读刷新任务状态。
 */
.device-identity-profile-waiting {
  min-height: 112px;
  padding-top: 20px;
  border-top: 1px solid var(--gof-line);
}

/*
 * phone_ready 没有可编辑字段，等待区使用普通分隔线承接摘要，并保留显式刷新按钮作为
 * 自动轮询之外的键盘可访问后备操作。该区域不使用强调色，避免被误读为成功或错误。
 */
.device-identity-waiting {
  min-height: 112px;
  padding-top: 20px;
  border-top: 1px solid var(--gof-line);
  align-items: center;
  gap: 12px;
}

.device-identity-waiting:not([hidden]) {
  display: flex;
}

.device-identity-waiting > .spinner-border {
  flex: 0 0 auto;
}

/*
 * 侧栏存在时 1280px 以下的主内容宽度不足以稳定容纳十一列。设备表在该断点提前转换
 * 为逐台记录，DOM 顺序保持不变，键盘和读屏仍按设备、状态、任务、操作依次访问。
 */
@media (max-width: 1279.98px) {
  .device-toolbar-title {
    width: 100%;
    padding-top: 0;
  }

  .device-filter-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-basis: 100%;
    margin-left: 0 !important;
  }

  .device-toolbar-search {
    min-width: 0;
    grid-column: span 2;
  }

  /* thead 在此断点隐藏，排序 select 成为主要入口并保持完整 44px 触控目标。 */
  .device-sort-field .form-select {
    min-height: 44px;
  }

  .device-management-card .table-responsive {
    overflow: visible;
  }

  .device-table,
  .device-table tbody,
  .device-table tr,
  .device-table td {
    display: block;
    width: 100%;
  }

  .device-table {
    min-width: 0;
  }

  .device-table thead {
    display: none;
  }

  .device-table tr[data-device-row] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gof-line);
  }

  .device-table tr[data-device-row]:last-of-type {
    border-bottom: 0;
  }

  .device-table td,
  .device-table td:first-child {
    padding: 6px 0;
    border: 0;
  }

  .device-table td[data-label] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .device-field-label {
    display: block;
    flex: 0 0 96px;
    color: var(--gof-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
  }

  .device-field-value {
    max-width: calc(100% - 112px);
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .device-actions-column {
    width: 100%;
    min-width: 0;
  }

  .device-selection-cell {
    width: 100%;
    min-width: 0;
  }

  .device-actions {
    justify-content: flex-end;
  }

  .device-field-value .device-zone-progress {
    align-items: flex-end;
  }

  .device-empty-row td {
    display: block;
    width: 100%;
    padding: 40px 16px;
  }
}

@media (max-width: 767.98px) {
  .device-pool-overview {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .device-pool-metrics {
    width: 100%;
  }

  .device-pool-metrics > div {
    padding: 0 12px;
  }

  .device-pool-metrics > div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .device-toolbar {
    align-items: stretch;
    padding: 12px;
  }

  .device-toolbar-title,
  .device-filter-controls,
  .device-toolbar-search {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    margin-left: 0 !important;
  }

  .device-filter-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-toolbar-search,
  .device-filter-action {
    grid-column: 1 / -1;
  }

  .device-filter-action .btn {
    width: 100%;
    min-height: 44px;
  }

  .device-batch-toolbar {
    align-items: stretch;
    padding: var(--gof-space-2) var(--gof-space-3);
  }

  .device-batch-actions {
    width: 100%;
    margin-left: 0 !important;
  }

  .device-batch-actions .btn {
    flex: 1 1 180px;
  }

  .device-zone-batch-kid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-zone-batch-device {
    grid-template-columns: minmax(0, 1fr);
  }

  .device-zone-batch-device-outcome {
    align-items: flex-start;
    text-align: left;
  }

  .device-filter-field .form-control,
  .device-filter-field .form-select,
  .device-filter-empty-reset {
    min-height: 44px;
  }

  .device-table tr[data-device-row] {
    padding: 16px 14px;
  }

  .device-field-label {
    flex-basis: 88px;
  }

  .device-field-value {
    max-width: calc(100% - 104px);
  }

  .device-actions .btn,
  #device-log-refresh,
  #device-identity-refresh,
  #device-identity-wait-refresh,
  #device-zone-training-reload {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  #device-log-push,
  #device-log-push-cancel,
  #device-log-push-confirm-submit {
    min-height: 44px;
  }

  .device-zone-training-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--gof-space-3);
  }

  .device-zone-timeline-filters,
  .device-zone-timeline-event-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .device-zone-timeline-filters .form-control,
  .device-zone-timeline-filters .form-select,
  .device-zone-timeline-filter-action .btn,
  #device-zone-timeline-more {
    min-height: 44px;
  }

  .device-zone-training-slot {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px var(--gof-space-3);
  }

  .device-zone-training-slot-status {
    justify-self: end;
  }

  .device-zone-training-slot-kid {
    grid-column: 1 / -1;
  }

  .device-zone-training-kid-input {
    min-height: 44px;
  }

  .device-zone-training-footer {
    align-items: stretch;
  }

  .device-zone-training-footer,
  .device-zone-training-footer > .d-flex {
    flex-direction: column;
  }

  #device-zone-training-save,
  #device-zone-training-pause,
  #device-zone-training-resume,
  #device-zone-training-new-cycle,
  .device-zone-training-footer > .btn {
    width: 100%;
    min-height: 44px;
  }

  .device-zone-timeline-copy {
    min-height: 44px;
  }

  .device-log-output {
    height: min(50vh, 420px);
    min-height: 220px;
    padding: var(--gof-space-3);
  }

  .device-log-loading,
  .device-log-empty {
    min-height: 220px;
  }

  .device-account-snapshot-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .device-account-token-row {
    grid-column: auto;
  }

  .device-identity-summary,
  .device-identity-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 窄屏已收敛为单列，任务编号不应留下一个无意义的空白网格轨道。 */
  .device-identity-summary-reference {
    grid-column: auto;
  }

  .device-section-heading {
    align-items: center;
  }

  .device-identity-waiting {
    align-items: flex-start;
  }

  .device-identity-mode-selector .btn-group,
  .device-identity-mode-selector .btn {
    width: 100%;
  }

  .device-list-footer {
    align-items: stretch;
    flex-direction: column;
    padding: var(--gof-space-3) 14px;
  }

  .device-list-count,
  .device-pagination-controls {
    width: 100%;
    flex-basis: auto;
  }

  .device-pagination-controls {
    justify-content: flex-start;
  }

  .device-page-size {
    min-height: 44px;
  }

  .device-pagination-controls nav {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .device-pagination {
    width: max-content;
    min-width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .device-pagination .page-link {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 479.98px) {
  /*
   * 320px 下两个页级动作若与标题同排，会把“设备管理”挤成逐字竖排。设备页单独
   * 改为标题一行、动作一行；按钮等分剩余宽度且移除模板桌面间距，不影响其他页面。
   */
  .device-page-header .row {
    align-items: stretch !important;
  }

  .device-page-header .col,
  .device-page-header .col-auto {
    width: 100%;
    flex: 1 1 100%;
  }

  .device-page-header .col-auto {
    display: flex;
    gap: var(--gof-space-2);
  }

  .device-page-header .col-auto .btn {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 0;
    margin-right: 0 !important;
  }

  .device-filter-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .device-toolbar-search,
  .device-filter-action {
    grid-column: auto;
  }

  .device-zone-batch-kid-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 399.98px) {
  .device-pool-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .device-pool-metrics > div {
    padding-right: 8px;
    padding-left: 8px;
  }

  .device-field-label {
    flex-basis: 78px;
  }

  .device-field-value {
    max-width: calc(100% - 94px);
  }
}