:root {
      --blue: #0066FF;
      --blue-600: #0052D9;
      --blue-50: #EBF2FF;
      --text: #1f2937;
      --muted: #667085;
      --light: #f7f9fc;
      --line: #e9edf4;
      --soft: #f2f5f9;
      --green: #13c2a3;
      --orange: #faad14;
      --red: #f04438;
      --purple: #6f61ff;
      --radius: 8px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--text);
      background: #fff;
      font-size: 14px;
      letter-spacing: 0;
      min-width: 1180px;
    }

    button,
    input,
    select {
      font: inherit;
    }

    .app {
      display: block;
      min-height: 100vh;
      background: #fff;
    }

    .sidebar {
      width: 248px;
      background: #fbfcfe;
      border-right: 1px solid var(--line);
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 8;
      transition: width .18s ease;
    }

    .sidebar.collapsed {
      width: 76px;
    }

    .brand {
      height: 72px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 24px;
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }

    .brand-logo {
      width: 176px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
    }

    .brand-logo-icon {
      width: 32px;
      height: 32px;
      object-fit: contain;
      display: none;
    }

    .brand-title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #1f2937;
      font-size: 18px;
      font-weight: 760;
      line-height: 1;
    }

    .collapse-btn {
      position: absolute;
      top: 24px;
      right: -14px;
      width: 28px;
      height: 28px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: #9aa4b2;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    }

    .nav {
      height: calc(100vh - 72px);
      overflow: auto;
      padding: 16px 12px 24px;
    }

    .nav-group {
      margin-bottom: 8px;
    }

    .nav-head {
      height: 42px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 0;
      border-radius: var(--radius);
      padding: 0 14px;
      background: transparent;
      color: #3f4857;
      cursor: pointer;
      font-weight: 650;
    }

    .nav-head:hover {
      background: #f2f6fb;
    }

    .nav-head.active {
      background: #edf5ff;
      color: var(--blue);
      box-shadow: inset 0 0 0 1px rgba(0, 102, 255, .08);
    }

    .nav-icon {
      width: 20px;
      height: 20px;
      display: inline-block;
      flex: 0 0 auto;
      object-fit: contain;
      box-sizing: border-box;
    }

    .nav-icon.gateway,
    .nav-icon.asset {
      padding: 2px;
    }

    .nav-icon.push {
      padding: 3px;
      opacity: .82;
    }

    .nav-head.active .nav-icon {
      filter: none;
    }

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

    .nav-arrow {
      color: #a6b0bf;
      transition: transform .16s ease;
    }

    .subnav {
      margin: 8px 0 10px;
      padding: 8px;
      display: grid;
      gap: 4px;
      border-radius: 8px;
      background: #f3f7fd;
    }

    .nav-group.folded .subnav {
      display: none;
    }

    .nav-group.folded .nav-arrow {
      transform: rotate(-90deg);
    }

    .subnav button {
      width: 100%;
      height: 36px;
      display: flex;
      align-items: center;
      gap: 6px;
      border: 0;
      border-radius: 7px;
      padding: 0 10px 0 46px;
      color: #5f6878;
      background: transparent;
      cursor: pointer;
      text-align: left;
    }

    .subnav button span:first-child {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav-badge-group,
    .subnav .nav-badge-group {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      flex: 0 0 auto;
    }

    .subnav button:hover {
      background: #f1f5fb;
    }

    .subnav button.active {
      color: var(--blue);
      background: #e8f2ff;
      font-weight: 650;
    }

    .tag-p0 {
      height: 18px;
      min-width: 28px;
      padding: 0 6px;
      border-radius: 9px;
      background: #fff1f0;
      color: var(--red);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
    }

    .nav-new-badge {
      height: 18px;
      padding: 0 6px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff1f0;
      color: #f04438;
      font-size: 10px;
      font-weight: 750;
      line-height: 1;
    }
    .nav-ver-20 { background: #f2f4f7; color: #667085; }
    .nav-ver-30 { background: #fff6ed; color: #dc6803; }
    .nav-ver-40 { background: #fff1f0; color: #f04438; }

    .sidebar.collapsed .brand-title,
    .sidebar.collapsed .nav-title,
    .sidebar.collapsed .nav-arrow,
    .sidebar.collapsed .nav-new-badge,
    .sidebar.collapsed .nav-badge-group,
    .sidebar.collapsed .tag-p0 {
      display: none;
    }

    .sidebar.collapsed .nav {
      overflow: visible;
    }

    .sidebar.collapsed .nav-group {
      position: relative;
    }

    .sidebar.collapsed .subnav {
      display: none;
      position: absolute;
      left: 58px;
      top: 0;
      width: 190px;
      margin: 0;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
      z-index: 20;
    }

    .sidebar.collapsed .subnav::after {
      content: "";
      position: absolute;
      left: -18px;
      top: 0;
      width: 18px;
      height: 100%;
    }

    .sidebar.collapsed .subnav::before {
      content: attr(data-title);
      display: block;
      padding: 8px 10px 10px;
      color: #293241;
      font-weight: 720;
      border-bottom: 1px solid var(--line);
      margin-bottom: 4px;
    }

    .sidebar.collapsed .nav-group:hover .subnav {
      display: grid;
    }

    .sidebar.collapsed .nav-head[data-title]::after {
      content: attr(data-title);
      position: absolute;
      left: 58px;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      min-width: max-content;
      padding: 7px 10px;
      border-radius: 6px;
      background: #202938;
      color: #fff;
      font-size: 13px;
      box-shadow: 0 8px 20px rgba(32, 41, 56, .18);
      z-index: 30;
      pointer-events: none;
    }

    .sidebar.collapsed .nav-group:not(:has(.subnav)) .nav-head:hover::after {
      display: block;
    }

    .sidebar.collapsed + .main {
      margin-left: 76px;
    }

    .sidebar.hidden + .main {
      margin-left: 0;
    }

    .sidebar.collapsed .brand {
      justify-content: center;
      padding: 0;
    }

    .sidebar.collapsed .brand-logo {
      display: none;
    }

    .sidebar.collapsed .brand-logo-icon {
      display: block;
    }

    .main {
      min-width: 0;
      margin-left: 248px;
      padding-top: 72px;
      transition: margin-left .18s ease;
      background: #fff;
      overflow-x: hidden;
    }

    .topbar {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px 0 36px;
      border-bottom: 1px solid var(--line);
      background: #fff;
      position: fixed;
      top: 0;
      left: 248px;
      right: 0;
      z-index: 6;
      min-width: 0;
    }

    .sidebar.collapsed + .main .topbar {
      left: 76px;
    }

    .sidebar.hidden + .main .topbar {
      left: 0;
    }

    .crumbs {
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 18px;
      color: #96a0ae;
      min-width: 0;
      flex: 1;
    }

    .app.no-permission-mode .crumbs {
      display: none;
    }

    .app.no-permission-mode .topbar {
      justify-content: flex-end;
    }

    .app.no-permission-mode .page-head {
      display: none;
    }

    #tabsBar {
      display: flex;
      gap: 8px;
      align-items: center;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    #tabsBar::-webkit-scrollbar {
      display: none;
    }

    .crumb {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 32px;
      white-space: nowrap;
    }

    .tab {
      height: 36px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 7px;
      color: var(--blue);
      background: #f3f8ff;
      font-weight: 650;
      max-width: 220px;
      border: 0;
      cursor: pointer;
    }

    .tab-close {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      display: inline-grid;
      place-items: center;
      color: inherit;
      font-size: 15px;
      line-height: 1;
    }

    .tab-close:hover {
      background: rgba(0, 102, 255, .12);
    }

    .tab:not(.active) {
      color: #667085;
      background: transparent;
      font-weight: 600;
    }

    .tab span:nth-child(2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dot-grid {
      width: 14px;
      height: 14px;
      background: var(--blue);
      border-radius: 3px;
      clip-path: polygon(0 0, 42% 0, 42% 42%, 0 42%, 0 0, 58% 0, 100% 0, 100% 42%, 58% 42%, 58% 0, 0 58%, 42% 58%, 42% 100%, 0 100%, 0 58%, 58% 58%, 100% 58%, 100% 100%, 58% 100%, 58% 58%);
    }

    .tab:not(.active) .dot-grid {
      background: #b8c2d1;
    }

    .tab .nav-icon {
      width: 20px;
      height: 20px;
    }

    .userbar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 16px;
      color: #5d6675;
      min-width: 0;
      flex: 0 0 auto;
    }

    .global-search {
      width: 260px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 12px;
      color: #5d6675;
      outline: 0;
      transition: width .18s ease;
    }

    .search-wrap {
      position: relative;
    }

    .search-clear {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 50%;
      background: #eef2f7;
      color: #667085;
      cursor: pointer;
      line-height: 1;
      display: grid;
      place-items: center;
    }

    .search-wrap:focus-within .global-search {
      width: 360px;
    }

    .search-results {
      position: absolute;
      top: 46px;
      left: 0;
      right: 0;
      width: auto;
      min-width: 100%;
      max-height: 360px;
      overflow: auto;
      display: none;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 16px 36px rgba(15, 23, 42, .14);
      z-index: 18;
    }

    .search-results.open {
      display: grid;
      gap: 4px;
    }

    .search-result-item {
      min-height: 42px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 0 10px;
      cursor: pointer;
      color: #3f4857;
      text-align: left;
    }

    .search-result-item:hover {
      background: #f3f8ff;
      color: var(--blue);
    }

    .search-result-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 650;
    }

    .search-empty {
      padding: 14px 10px;
      color: #8a94a4;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--blue);
      color: #fff;
      font-weight: 700;
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: #5d6675;
      cursor: pointer;
      position: relative;
      display: inline-grid;
      place-items: center;
    }

    .notice-icon {
      width: 16px;
      height: 18px;
      border: 2px solid currentColor;
      border-radius: 9px 9px 6px 6px;
      border-bottom-width: 3px;
      position: relative;
    }

    .notice-icon::before {
      content: "";
      position: absolute;
      width: 6px;
      height: 3px;
      border-radius: 0 0 6px 6px;
      background: currentColor;
      left: 3px;
      bottom: -7px;
    }

    .icon-btn .badge {
      position: absolute;
      top: -5px;
      right: -5px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--red);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
    }

    .user-menu-wrap {
      position: relative;
    }

    .user-menu-trigger {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 0;
      background: transparent;
      color: #5d6675;
      cursor: pointer;
      padding: 0;
    }

    .user-menu {
      position: absolute;
      right: 0;
      top: 46px;
      width: 180px;
      display: none;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 14px 28px rgba(15, 23, 42, .12);
      z-index: 14;
    }

    .user-menu.open {
      display: grid;
      gap: 4px;
    }

    .user-menu button {
      height: 34px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      text-align: left;
      padding: 0 10px;
      color: #3f4857;
      cursor: pointer;
    }

    .user-menu button:hover {
      background: #f3f5f8;
    }

    .content {
      padding: 28px 28px 36px 36px;
      background: #fff;
    }

    .page-head {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: flex-start;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }

    .page-head > div:first-child {
      min-width: 0;
      max-width: 760px;
    }

    .empty-state {
      margin-top: 22px;
      min-height: 440px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      text-align: center;
      color: #7a8493;
    }

    .empty-state h2 {
      margin: 0 0 10px;
      color: #293241;
      font-size: 22px;
    }

    .no-permission-card {
      width: min(520px, 100%);
      display: grid;
      justify-items: center;
      gap: 14px;
      color: #6b7483;
    }

    .no-permission-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #f0f6ff;
      color: var(--blue);
      font-size: 32px;
      font-weight: 760;
    }

    .mock-login-btn {
      border: 0;
      background: transparent;
      color: #8a94a4;
      cursor: pointer;
      font-size: 13px;
    }

    .mock-login-btn:hover {
      color: var(--blue);
    }

    h1 {
      margin: 0 0 8px;
      font-size: 24px;
      line-height: 1.25;
      font-weight: 760;
    }

    h1 .btn {
      height: 34px;
      font-size: 14px;
      line-height: 1;
      vertical-align: middle;
    }

    .page-subtitle {
      margin: 0;
      color: #7a8493;
      line-height: 1.6;
    }

    .page-subtitle:empty {
      display: none;
    }

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

    .btn {
      height: 38px;
      border-radius: 6px;
      border: 0;
      padding: 0 16px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 400;
    }

    .btn.primary {
      background: var(--blue);
      color: #fff;
      box-shadow: 0 6px 14px rgba(0, 102, 255, .18);
    }

    .btn.ghost {
      background: #f3f5f8;
      color: #3f4857;
    }

    .btn.text {
      height: auto;
      padding: 0;
      background: transparent;
      color: var(--blue);
    }

    .filters {
      display: grid;
      grid-template-columns: repeat(4, minmax(180px, 1fr));
      gap: 18px 24px;
      margin: 22px 0 24px;
    }

    .field {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }

    .field label {
      color: #5d6675;
      text-align: right;
      font-weight: 600;
    }

    .field input,
    .field select {
      height: 38px;
      border: 1px solid #dfe5ee;
      border-radius: 8px;
      padding: 0 14px;
      color: #6b7280;
      background: #fff;
      outline: 0;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 316px;
      gap: 24px;
    }

    .summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 20px;
    }

    .metric-card,
    .panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .metric-card {
      min-height: 118px;
      padding: 18px;
      cursor: pointer;
      transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    }

    .metric-card:hover {
      border-color: #b9d4ff;
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(28, 39, 60, .06);
    }

    .metric-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #6b7280;
      font-weight: 650;
    }

    .metric-value {
      margin-top: 16px;
      font-size: 28px;
      font-weight: 780;
      line-height: 1;
    }

    .metric-foot {
      margin-top: 12px;
      color: #8791a0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .up { color: #13a87d; }
    .warn { color: var(--orange); }
    .bad { color: var(--red); }

    .panel {
      margin-bottom: 20px;
      min-width: 0;
    }

    .panel-head {
      min-height: 56px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
    }

    .panel-title {
      font-size: 16px;
      font-weight: 720;
    }

    .segmented {
      height: 32px;
      padding: 3px;
      display: inline-flex;
      gap: 2px;
      background: #f3f5f8;
      border-radius: 8px;
    }

    .segmented button {
      border: 0;
      min-width: 54px;
      border-radius: 6px;
      background: transparent;
      color: #6b7280;
      cursor: pointer;
    }

    .segmented button.active {
      background: #fff;
      color: var(--blue);
      font-weight: 650;
      box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    }

    .chart-wrap {
      padding: 18px 20px 20px;
      display: grid;
      grid-template-columns: minmax(0, 1.8fr) minmax(240px, .9fr);
      gap: 24px;
      align-items: stretch;
    }

    .line-chart {
      height: 270px;
      border-left: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      position: relative;
      background:
        linear-gradient(to top, var(--line) 1px, transparent 1px) 0 0 / 100% 54px;
      overflow: hidden;
    }

    .line-chart svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .chart-labels {
      display: flex;
      justify-content: space-between;
      color: #9aa4b2;
      font-size: 12px;
      margin-top: 10px;
    }

    .stack-list {
      display: grid;
      gap: 14px;
      align-content: center;
    }

    .stack-row {
      display: grid;
      gap: 8px;
    }

    .stack-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #586174;
    }

    .bar {
      height: 8px;
      background: #f0f3f8;
      border-radius: 999px;
      overflow: hidden;
    }

    .bar span {
      height: 100%;
      display: block;
      border-radius: 999px;
      background: var(--blue);
    }

    .overview-modules {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      padding: 18px;
    }

    .module-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
      background: #fff;
      min-height: 144px;
      cursor: pointer;
    }

    .module-card:hover {
      border-color: #b9d4ff;
      background: #fbfdff;
    }

    .module-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .module-name {
      font-weight: 720;
      font-size: 15px;
    }

    .pill {
      height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      color: #5d6675;
      background: #f3f5f8;
      font-size: 12px;
    }

    .pill.blue { color: var(--blue); background: var(--blue-50); }
    .pill.green { color: #07926e; background: #e9fbf6; }
    .pill.orange { color: #b36b00; background: #fff7e6; }
    .pill.red { color: var(--red); background: #fff1f0; }

    .module-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 14px;
    }

    .mini-stat {
      padding: 10px 8px;
      background: #f8fafc;
      border-radius: 7px;
    }

    .mini-stat b {
      display: block;
      font-size: 18px;
      margin-bottom: 5px;
    }

    .mini-stat span {
      color: #8a94a4;
      font-size: 12px;
    }

    .module-note {
      color: #737d8c;
      line-height: 1.5;
    }

    .board-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 20px;
      margin-top: 22px;
    }

    .board-stage {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 20px;
    }

    .stage-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
      background: #fff;
      min-height: 116px;
    }

    .stage-card span {
      color: #7a8493;
      font-weight: 650;
    }

    .stage-card b {
      display: block;
      margin-top: 12px;
      font-size: 26px;
    }

    .stage-card small {
      display: block;
      margin-top: 10px;
      color: #8a94a4;
      line-height: 1.45;
    }

    .board-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      padding: 18px;
    }

    .bi-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
      background: #fff;
      min-height: 190px;
      cursor: pointer;
    }

    .bi-card:hover {
      border-color: #b9d4ff;
      background: #fbfdff;
    }

    .bi-card-head,
    .bi-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .bi-card h3 {
      margin: 0;
      font-size: 16px;
    }

    .bi-card p {
      margin: 12px 0 16px;
      color: #6b7280;
      line-height: 1.7;
    }

    .board-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .board-meta div {
      border-radius: 7px;
      background: #f8fafc;
      padding: 10px;
    }

    .board-meta strong {
      display: block;
      margin-bottom: 5px;
    }

    .board-meta span {
      color: #8a94a4;
      font-size: 12px;
    }

    .scope-list {
      display: grid;
      gap: 12px;
      padding: 16px 18px 18px;
    }

    .scope-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      display: grid;
      gap: 8px;
    }

    .scope-item strong {
      color: #293241;
    }

    .scope-item span {
      color: #7a8493;
      line-height: 1.6;
    }

    .board-page-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin: 22px 0 16px;
    }

    .board-tabs,
    .board-switcher {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .board-tabs::-webkit-scrollbar,
    .board-switcher::-webkit-scrollbar {
      display: none;
    }

    .board-tab,
    .board-option {
      height: 36px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 14px;
      background: #fff;
      color: #5f6878;
      cursor: pointer;
      white-space: nowrap;
      font-weight: 650;
    }

    .board-tab.active,
    .board-option.active {
      border-color: #b9d4ff;
      background: var(--blue-50);
      color: var(--blue);
    }

    .board-option {
      height: 40px;
    }

    .board-canvas {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 20px;
    }

    .board-main {
      min-width: 0;
    }

    .board-panel {
      display: none;
    }

    .board-panel.active {
      display: block;
    }

    .board-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 16px;
    }

    .kpi-tile {
      min-height: 104px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
      background: #fff;
    }

    .kpi-tile span {
      display: block;
      color: #7a8493;
      font-weight: 650;
      margin-bottom: 14px;
    }

    .kpi-tile b {
      font-size: 26px;
      line-height: 1;
    }

    .kpi-tile small {
      display: block;
      margin-top: 10px;
      color: #8a94a4;
    }

    .board-visual-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(280px, .85fr);
      gap: 16px;
      margin-bottom: 16px;
    }

    .board-chart {
      min-height: 312px;
      padding: 18px;
    }

    .chart-bars {
      height: 220px;
      display: flex;
      align-items: end;
      gap: 18px;
      padding: 18px 10px 0;
      border-left: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(to top, var(--line) 1px, transparent 1px) 0 0 / 100% 44px;
    }

    .chart-bars span {
      flex: 1;
      min-width: 24px;
      border-radius: 6px 6px 0 0;
      background: linear-gradient(180deg, #0066FF, #7db5ff);
    }

    .rank-list {
      display: grid;
      gap: 10px;
      padding: 16px 18px 18px;
    }

    .rank-row {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 34px;
      color: #5d6675;
    }

    .rank-row b {
      color: #293241;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .board-side {
      display: grid;
      gap: 16px;
      align-content: start;
    }

    .right-rail {
      display: grid;
      gap: 20px;
      align-content: start;
    }

    .health-score {
      padding: 20px;
    }

    .score-ring {
      width: 134px;
      height: 134px;
      margin: 6px auto 16px;
      border-radius: 50%;
      background: conic-gradient(var(--blue) 0 82%, #edf2f8 82% 100%);
      display: grid;
      place-items: center;
      position: relative;
    }

    .score-ring::after {
      content: "";
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: #fff;
      position: absolute;
    }

    .score-ring b {
      position: relative;
      z-index: 1;
      font-size: 30px;
    }

    .health-list,
    .issue-list {
      display: grid;
      gap: 10px;
    }

    .health-item,
    .issue-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #626b7a;
    }

    .health-item strong {
      color: #293241;
    }

    .issue-list {
      padding: 14px 18px 18px;
    }

    .issue-item {
      min-height: 48px;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
    }

    .issue-item:last-child {
      border-bottom: 0;
    }

    .issue-main {
      display: grid;
      gap: 5px;
    }

    .issue-main strong {
      font-size: 14px;
    }

    .issue-main span {
      color: #8a94a4;
      font-size: 12px;
    }

    .flow {
      padding: 18px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }

    .flow-step {
      min-height: 92px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: #fbfcfe;
    }

    .flow-step b {
      display: block;
      margin-bottom: 8px;
    }

    .flow-step span {
      color: #7a8493;
      line-height: 1.5;
      font-size: 12px;
    }

    .toast {
      position: fixed;
      right: 28px;
      top: 92px;
      min-width: 220px;
      height: 44px;
      display: none;
      align-items: center;
      padding: 0 16px;
      border-radius: 8px;
      background: #1f2937;
      color: #fff;
      box-shadow: 0 14px 28px rgba(15, 23, 42, .18);
      z-index: 30;
    }

    .toast.show { display: flex; }

    .drawer-mask {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .18);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
      z-index: 38;
    }

    .drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: min(760px, 56vw);
      max-width: calc(100vw - 40px);
      height: 100vh;
      height: 100dvh;
      max-height: 100vh;
      max-height: 100dvh;
      background: #fff;
      box-shadow: -14px 0 30px rgba(15, 23, 42, .12);
      transform: translateX(100%);
      transition: transform .18s ease;
      z-index: 39;
      display: flex;
      flex-direction: column;
      overscroll-behavior: contain;
    }

    .drawer.open,
    .drawer-mask.open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }

    .drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      border-bottom: 1px solid var(--line);
      flex: 0 0 72px;
    }

    .drawer-body {
      overflow-y: auto;
      overflow-x: hidden;
      display: block;
      flex: 1 1 auto;
      height: calc(100vh - 72px);
      height: calc(100dvh - 72px);
      min-height: 0;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .drawer-scroll {
      padding: 18px 24px 28px;
      overflow: visible;
      max-height: none;
      min-height: auto;
    }

    .drawer-footer {
      min-height: 76px;
      border-top: 1px solid var(--line);
      background: #fff;
      position: sticky;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px 24px;
      box-shadow: 0 -12px 24px rgba(15, 23, 42, .04);
      z-index: 3;
    }

    .asset-detail {
      display: grid;
      gap: 12px;
      min-height: auto;
      padding-bottom: 12px;
    }

    .asset-hero {
      border: 1px solid #dfe7f3;
      border-radius: 8px;
      padding: 10px 12px;
      background: #fbfdff;
      display: grid;
      gap: 8px;
    }

    .asset-info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 12px;
    }

    .asset-info-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      background: #fff;
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .asset-info-item span {
      color: #7a8493;
      font-size: 12px;
    }

    .asset-info-item strong {
      color: #293241;
      font-size: 13px;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.45;
    }

    .asset-info-code {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      word-break: break-all;
    }

    .asset-section {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      flex: 0 0 auto;
    }

    .asset-export-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 12px;
      padding: 12px;
    }

    .asset-export-fields .check-row { min-width: 0; }

    .asset-section-head {
      min-height: 40px;
      padding: 0 16px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .asset-section-head strong {
      font-size: 14px;
    }

    .asset-section-body {
      padding: 16px;
    }

    .asset-description-body {
      padding: 12px 14px;
      overflow: visible;
    }

    .asset-description-section {
      overflow: visible;
    }

    .asset-description-input {
      width: 100% !important;
      max-width: 100% !important;
      min-height: 88px !important;
      height: auto;
      resize: vertical !important;
      padding: 10px 12px !important;
      display: block;
      box-sizing: border-box !important;
      line-height: 1.6;
      overflow: auto;
    }

    .asset-field-section {
      min-height: auto;
    }

    .asset-field-table-wrap {
      border: 0;
      border-radius: 0;
      max-height: none;
      overflow: visible;
      max-width: none;
      min-height: auto;
    }

    .asset-field-table {
      min-width: 0 !important;
      width: 100% !important;
      table-layout: fixed !important;
    }

    .asset-field-table th,
    .asset-field-table td {
      white-space: normal !important;
      vertical-align: middle;
      padding: 10px 16px;
    }

    .asset-field-table th:first-child,
    .asset-field-table td:first-child,
    .asset-field-table th:last-child,
    .asset-field-table td:last-child {
      position: static !important;
      left: auto !important;
      right: auto !important;
      z-index: auto !important;
      box-shadow: none !important;
    }

    .asset-field-table thead th {
      position: sticky !important;
      top: 0;
      z-index: 2 !important;
      background: #f8fafc;
    }

    .asset-field-table th:nth-child(1),
    .asset-field-table td:nth-child(1) { width: 24% !important; }

    .asset-field-table th:nth-child(2),
    .asset-field-table td:nth-child(2) { width: 16% !important; }

    .asset-field-table th:nth-child(3),
    .asset-field-table td:nth-child(3) { width: 18% !important; }

    .asset-field-table th:nth-child(4),
    .asset-field-table td:nth-child(4) { width: 42% !important; }

    .asset-field-remark-input {
      width: 100% !important;
      box-sizing: border-box;
      height: 34px !important;
      padding: 0 10px !important;
    }

    .asset-manage-table {
      table-layout: fixed;
      min-width: 2200px;
    }

    .asset-manage-table th:nth-child(3),
    .asset-manage-table td:nth-child(3) {
      width: 220px;
      max-width: 220px;
    }

    .asset-external-name-col {
      width: 240px;
      max-width: 240px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .asset-manage-table th:nth-child(4),
    .asset-manage-table td:nth-child(4) { width: 140px; }

    .asset-manage-table th:nth-child(5),
    .asset-manage-table td:nth-child(5) { width: 120px; }

    .asset-manage-table th:nth-child(6),
    .asset-manage-table td:nth-child(6) { width: 150px; }

    .asset-manage-table th:nth-child(7),
    .asset-manage-table td:nth-child(7) { width: 340px; }

    .asset-manage-table th:nth-child(8),
    .asset-manage-table td:nth-child(8) { width: 72px; }

    .asset-manage-table th:nth-child(9),
    .asset-manage-table td:nth-child(9) { width: 90px; }

    .asset-manage-table th:nth-child(10),
    .asset-manage-table td:nth-child(10) { width: 156px; }

    .asset-manage-table th:nth-child(11),
    .asset-manage-table td:nth-child(11) { width: 132px; }

    .asset-manage-table th:nth-child(12),
    .asset-manage-table td:nth-child(12) { width: 112px; }

    .asset-manage-table td {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .asset-manage-table td:last-child {
      overflow: visible;
    }

    .table-name-cell {
      display: block;
      max-width: 230px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .icon-sync-btn {
      width: 26px;
      height: 26px;
      border: 0;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff7e6;
      color: #b36b00;
      cursor: pointer;
      font-size: 15px;
      line-height: 1;
    }

    .icon-sync-btn:hover {
      background: #ffe8ba;
    }

    .modal {
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      background: rgba(15, 23, 42, .18);
      z-index: 40;
    }

    .modal.open {
      display: grid;
    }

    .modal-card {
      width: 560px;
      max-width: calc(100vw - 48px);
      max-height: calc(100vh - 72px);
      overflow: auto;
      position: relative;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 22px 46px rgba(15, 23, 42, .18);
      padding: 22px;
    }

    .modal-card h3 {
      margin: 0 0 10px;
      font-size: 18px;
    }

    .modal-card p {
      margin: 0;
      color: #667085;
      line-height: 1.7;
    }

    .modal-card .detail-block {
      margin-top: 16px;
      margin-bottom: 0;
    }

    .token-result-summary {
      display: grid;
      gap: 10px;
      margin-top: 16px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
    }

    .token-result-row {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      line-height: 1.6;
    }

    .token-result-row span {
      color: #7a8493;
    }

    .token-result-row strong {
      min-width: 0;
      color: #293241;
      overflow-wrap: anywhere;
    }

    .token-result-box {
      margin-top: 16px;
      padding: 14px 16px;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      background: #eff6ff;
    }

    .token-result-label {
      display: block;
      margin-bottom: 8px;
      color: #4b6380;
      font-size: 13px;
      font-weight: 650;
    }

    .token-result-code {
      display: block;
      padding: 10px 12px;
      border: 1px solid #d8e6f8;
      border-radius: 7px;
      background: #fff;
      color: #1f3b64;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      line-height: 1.5;
      overflow-wrap: anywhere;
      user-select: all;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 22px;
    }

    .form-grid {
      display: grid;
      gap: 14px;
    }

    .form-field {
      display: grid;
      gap: 8px;
    }

    .form-field label {
      color: #566174;
      font-weight: 650;
      font-size: 13px;
    }

    .form-field.required label::after {
      content: " *";
      color: #ff4d4f;
      font-weight: 760;
    }

    .field-error {
      display: none;
      color: #ff4d4f;
      font-size: 12px;
      line-height: 1.4;
    }

    .form-field.invalid .toolbar-input,
    .form-field.invalid .toolbar-select {
      border-color: #ff7875;
      box-shadow: 0 0 0 3px rgba(255, 77, 79, .08);
    }

    .form-field.invalid .field-error {
      display: block;
    }

    .form-field input,
    .form-field textarea,
    .form-field select {
      width: 100%;
      box-sizing: border-box;
    }

    /* 复选框/单选框不应被拉伸为 100%（否则挤压文字、导致中文逐字换行） */
    .form-field input[type="checkbox"],
    .form-field input[type="radio"],
    .cp-radio-row input,
    .cp-fieldlist input,
    .cp-enum input {
      width: auto;
      flex: 0 0 auto;
    }
    .cp-radio-row label,
    .cp-fieldlist label,
    .board-tree .bt-item,
    .cp-type-card,
    .cp-mode-tabs button {
      white-space: nowrap;
    }

    .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
    }

    .multi-check-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 14px;
    }

    .api-create-layout {
      display: grid;
      grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
      gap: 18px;
      align-items: stretch;
      height: calc(100vh - 230px);
      min-height: 520px;
    }

    .api-create-page {
      display: grid;
      gap: 16px;
      padding-bottom: 76px;
    }

    .api-create-footer {
      position: fixed;
      left: 248px;
      right: 0;
      bottom: 0;
      z-index: 7;
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 28px;
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 -8px 22px rgba(15, 23, 42, .06);
    }

    .sidebar.collapsed + .main .api-create-footer {
      left: 76px;
    }

    .sidebar.hidden + .main .api-create-footer {
      left: 0;
    }

    .api-rate-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .api-rate-row span {
      flex: 0 0 auto;
      color: #5d6878;
    }

    .api-asset-summary {
      display: block;
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #344054;
      font-size: 13px;
      line-height: 1.6;
    }

    .api-asset-tooltip {
      cursor: default;
    }

    .api-asset-tooltip-list {
      display: none;
      position: fixed;
      z-index: 1200;
      width: max-content;
      max-width: min(520px, calc(100vw - 32px));
      padding: 10px 12px;
      border: 1px solid #d9e1ec;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
      color: #344054;
      font-size: 13px;
      line-height: 1.7;
      white-space: pre-line;
      overflow-wrap: anywhere;
      pointer-events: none;
    }

    .api-asset-tooltip-list.visible {
      display: block;
    }

    .api-config-table td {
      padding-top: 14px;
      padding-bottom: 14px;
    }

    .asset-id-col {
      width: 76px;
      min-width: 76px;
      max-width: 76px;
      white-space: nowrap;
    }

    .list-status-tabs {
      display: flex;
      align-items: center;
      gap: 28px;
      min-height: 48px;
      padding: 0 20px;
      border-bottom: 1px solid var(--line);
    }

    .list-status-tabs button {
      align-self: stretch;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: #667085;
      padding: 0 2px;
      font: inherit;
      font-weight: 650;
      cursor: pointer;
    }

    .list-status-tabs button.active {
      border-bottom-color: var(--blue);
      color: var(--blue);
    }

    .api-picker-panel,
    .api-config-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .api-picker-head,
    .api-config-head {
      min-height: 44px;
      padding: 0 14px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .api-picker-head strong,
    .api-config-head strong {
      font-size: 14px;
    }

    .api-picker-body,
    .api-config-body {
      padding: 14px;
      overflow-y: auto;
      min-height: 0;
    }

    .api-table-options {
      display: grid;
      gap: 8px;
      padding-right: 4px;
    }

    .api-table-option {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 10px;
      cursor: pointer;
      background: #fbfcfe;
    }

    .api-table-option strong,
    .api-selected-table-title strong {
      display: block;
      color: #293241;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .api-table-option span,
    .api-selected-table-title span {
      display: block;
      margin-top: 4px;
      color: #7a8493;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .api-selected-tables {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .api-selected-table {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #fbfcfe;
    }

    .api-selected-table-title {
      min-height: 42px;
      padding: 9px 12px;
      border-bottom: 1px solid var(--line);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .api-selected-table-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .api-table-rate {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #667085;
      font-size: 12px;
      white-space: nowrap;
    }

    .api-table-rate input {
      width: 76px;
      height: 32px;
      padding: 0 8px;
    }

    .invalid-input {
      border-color: #ff7875 !important;
      box-shadow: 0 0 0 3px rgba(255, 77, 79, .08);
    }

    .api-field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 12px;
      padding: 12px;
    }

    .api-field-grid .check-row {
      min-height: 32px;
      background: #fff;
    }

    .menu-permission-grid {
      grid-template-columns: 1fr;
    }

    #menuPermissionList {
      grid-template-columns: 1fr;
    }

    .close-btn {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 8px;
      background: #f3f5f8;
      cursor: pointer;
      color: #596274;
    }

    .detail-block {
      margin-bottom: 22px;
    }

    .detail-block h3 {
      margin: 0 0 12px;
      font-size: 15px;
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      color: #667085;
    }

    .detail-row strong {
      color: #293241;
      text-align: right;
    }

    .hidden {
      display: none !important;
    }

    .manager-view {
      padding-top: 22px;
    }

    .sync-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 20px;
    }

    .sync-card {
      min-height: 94px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
      background: #fff;
    }

    .sync-card span {
      display: block;
      color: #7a8493;
      margin-bottom: 12px;
      font-weight: 650;
    }

    .sync-card b {
      font-size: 24px;
      line-height: 1;
    }

    .sync-card small {
      display: block;
      margin-top: 10px;
      color: #8a94a4;
    }

    .manager-layout {
      display: grid;
      gap: 20px;
      min-width: 0;
    }

    .table-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px;
      border-bottom: 1px solid var(--line);
    }

    .toolbar-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .toolbar-input,
    .toolbar-select {
      height: 36px;
      border: 1px solid #dfe5ee;
      border-radius: 8px;
      padding: 0 34px 0 12px;
      color: #596274;
      background: #fff;
      outline: 0;
    }

    .toolbar-select {
      appearance: none;
      background:
        linear-gradient(45deg, transparent 50%, #667085 50%) right 14px center / 7px 7px no-repeat,
        linear-gradient(135deg, #667085 50%, transparent 50%) right 9px center / 7px 7px no-repeat,
        #fff;
      min-width: 132px;
    }

    .toolbar-input {
      width: 240px;
    }

    .data-table-wrap {
      overflow: auto;
      max-width: 100%;
    }

    .data-table {
      width: 100%;
      min-width: 1100px;
      border-collapse: collapse;
      background: #fff;
    }

    .data-table th,
    .data-table td {
      height: 54px;
      padding: 0 14px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      white-space: nowrap;
    }

    .data-table th {
      color: #5d6675;
      font-weight: 720;
      background: #fbfcfe;
    }

    .data-table td {
      color: #3f4857;
    }

    .pagination-bar {
      min-height: 54px;
      padding: 10px 18px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #667085;
    }

    .pagination-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .pagination-page-size {
      width: 96px;
      min-width: 96px;
      height: 34px;
    }

    .pagination-btn {
      height: 34px;
      min-width: 34px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: #3f4857;
      cursor: pointer;
    }

    .pagination-btn:disabled {
      color: #b8c2d1;
      background: #f8fafc;
      cursor: not-allowed;
    }

    .data-table th:first-child,
    .data-table td:first-child {
      position: sticky;
      left: 0;
      z-index: 2;
      background: #fff;
      box-shadow: 1px 0 0 var(--line);
    }

    .data-table th:first-child {
      z-index: 3;
      background: #fbfcfe;
    }

    .data-table th:last-child,
    .data-table td:last-child {
      position: sticky;
      right: 0;
      z-index: 2;
      background: #fff;
      box-shadow: -1px 0 0 var(--line);
    }

    .data-table th:last-child {
      z-index: 3;
      background: #fbfcfe;
    }

    .user-cell {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .user-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--blue-50);
      color: var(--blue);
      font-weight: 720;
    }

    .user-name {
      display: grid;
      gap: 3px;
    }

    .user-name small {
      color: #8a94a4;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      display: inline-block;
      margin-right: 6px;
    }

    .status-dot.off {
      background: #c9d1dd;
    }

    .dashboard-directory {
      padding-top: 22px;
      display: grid;
      grid-template-columns: 290px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    .board-tree-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; position: sticky; top: 16px; }
    .board-tree-head { font-weight: 700; font-size: 15px; display: flex; align-items: center; color: #2f3b4d; }
    .board-tree-head .board-tree-count { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 400; }
    .board-tree-search { width: 100%; box-sizing: border-box; height: 36px; border: 1px solid #dfe5ee; border-radius: 8px; padding: 0 12px; margin: 12px 0 8px; background: var(--light); outline: 0; }
    .board-tree-body { max-height: calc(100vh - 250px); overflow: auto; }
    .bt-group-head { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 8px; padding: 9px 6px; cursor: pointer; color: #3f4857; font-size: 13.5px; font-weight: 650; }
    .bt-favorite-symbol { color: #f5a623; font-size: 17px; line-height: 1; }
    .bt-caret { transition: transform .15s; color: #98a2b3; font-size: 11px; }
    .bt-group.open .bt-caret { transform: rotate(90deg); }
    .bt-count { margin-left: auto; color: #98a2b3; font-size: 12px; font-weight: 400; }
    .bt-items { display: none; padding-left: 10px; }
    .bt-group.open .bt-items { display: block; }
    .bt-item-row { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; border-radius: 6px; }
    .bt-item { min-width: 0; flex: 1; text-align: left; border: 0; background: transparent; padding: 8px 12px; border-radius: 6px; cursor: pointer; color: #475467; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bt-item:hover { background: #f4f7fb; }
    .bt-item.active { background: var(--blue-50); color: var(--blue-600); font-weight: 650; }
    .bt-favorite-toggle { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #98a2b3; cursor: pointer; font-size: 18px; line-height: 1; opacity: 0; }
    .bt-item-row:hover .bt-favorite-toggle, .bt-favorite-toggle.is-favorite { opacity: 1; }
    .bt-favorite-toggle.is-favorite { color: #f5a623; }
    .bt-favorite-toggle:hover { background: #f4f7fb; }
    .board-pane { background: #fff; border: 1px solid var(--line); border-radius: 8px; min-height: 620px; overflow: hidden; }
    .bp-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
    .bp-head h2 { margin: 8px 0 2px; font-size: 18px; }
    .bp-sub { font-size: 12.5px; color: var(--muted); }
    .bp-head .btn { margin-left: auto; }
    .bp-board { padding: 20px; }
    .bp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
    .bp-kpi { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: linear-gradient(180deg, #fff, #fbfcfe); }
    .bp-kpi .t { font-size: 12px; color: var(--muted); }
    .bp-kpi .v { font-size: 24px; font-weight: 780; margin-top: 6px; letter-spacing: -.02em; }
    .bp-charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
    .bp-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
    .bp-card h3 { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; }

    .page-head-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      flex: 0 0 auto;
    }

    .page-head-actions .search-wrap {
      width: 360px;
      max-width: 100%;
    }

    .page-head-actions .global-search,
    .page-head-actions .search-wrap:focus-within .global-search {
      width: 100%;
    }

    .dashboard-directory > section {
      min-width: 0;
    }

    .category-list {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 4px;
      position: sticky;
      top: 92px;
    }

    .category-item {
      min-height: 38px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #5f6878;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 10px;
      cursor: pointer;
      text-align: left;
    }

    .category-item.active,
    .category-item:hover {
      background: var(--blue-50);
      color: var(--blue);
      font-weight: 650;
    }

    .category-count {
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      border-radius: 999px;
      background: #f3f5f8;
      color: #7a8493;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 650;
    }

    .category-item.active .category-count {
      background: #fff;
      color: var(--blue);
    }

    .board-directory-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .board-entry-card {
      min-height: 144px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 16px;
      display: grid;
      align-content: space-between;
      gap: 14px;
      cursor: pointer;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .board-entry-card:hover {
      border-color: #b9d4ff;
      box-shadow: 0 10px 24px rgba(28, 39, 60, .06);
      transform: translateY(-1px);
    }

    .board-entry-card h3 {
      margin: 0;
      font-size: 16px;
      line-height: 1.45;
    }

    .board-entry-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #8a94a4;
      font-size: 12px;
    }

    .board-manager-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px;
      border-bottom: 1px solid var(--line);
    }

    .category-manage-list {
      display: grid;
      gap: 8px;
      max-height: 430px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .category-add-row {
      display: grid;
      grid-template-columns: minmax(320px, 1fr) 72px;
      gap: 8px;
    }

    .category-manage-row {
      display: grid;
      grid-template-columns: 30px 36px minmax(260px, 1fr) 78px 58px;
      gap: 8px;
      align-items: center;
      min-height: 52px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px;
      background: #fbfcfe;
      cursor: grab;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
    }

    .category-manage-row.dragging {
      opacity: .72;
      border-color: #91caff;
      background: #f0f7ff;
      box-shadow: 0 12px 26px rgba(0, 102, 255, .14);
      transform: scale(.995);
      cursor: grabbing;
    }

    .drag-handle {
      width: 28px;
      height: 30px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #8a94a4;
      cursor: inherit;
      font-size: 18px;
      line-height: 1;
    }

    .category-manage-row input {
      min-width: 0;
      cursor: text;
      width: 100%;
      padding-right: 12px;
    }

    .category-usage {
      justify-self: center;
      min-width: 74px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #f3f5f8;
      color: #667085;
      font-size: 12px;
      white-space: nowrap;
    }

    .category-actions {
      justify-self: start;
      width: 58px;
      display: flex;
      justify-content: flex-start;
    }

    .category-actions .btn.text {
      min-width: 44px;
      text-align: left;
    }

    .category-sort {
      display: flex;
      gap: 4px;
      justify-content: center;
    }

    .icon-btn {
      width: 30px;
      height: 30px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      color: #6b7483;
      cursor: pointer;
    }

    .icon-btn:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    .category-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .quickbi-shell {
      padding-top: 22px;
    }

    .quickbi-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .quickbi-title h2 {
      margin: 0;
      font-size: 28px;
    }

    .quickbi-frame {
      min-height: 620px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(to right, #f6f9fd 1px, transparent 1px) 0 0 / 72px 72px,
        linear-gradient(to bottom, #f6f9fd 1px, transparent 1px) 0 0 / 72px 72px,
        #fff;
      display: grid;
      place-items: center;
      text-align: center;
      color: #667085;
      padding: 28px;
    }

    .quickbi-frame strong {
      display: block;
      margin-bottom: 10px;
      color: #293241;
      font-size: 22px;
    }

    .permission-page {
      padding-top: 22px;
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }

    .permission-user-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 18px;
      display: grid;
      gap: 14px;
    }

    .permission-user-card .user-avatar {
      width: 44px;
      height: 44px;
      font-size: 17px;
    }

    .permission-groups {
      display: grid;
      gap: 16px;
    }

    .permission-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .checkbox-list {
      padding: 16px 18px 18px;
      display: grid;
      gap: 12px;
    }

    .check-row {
      min-height: 36px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #3f4857;
    }

    .check-row input {
      width: 16px;
      height: 16px;
      accent-color: var(--blue);
    }

    .permission-board-group {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      display: grid;
      gap: 10px;
    }

    .permission-board-group strong {
      color: #293241;
    }

    .permission-board-grid {
      display: grid;
      grid-template-columns: 1fr;
      align-items: start;
      gap: 12px;
    }

    .permission-board-grid > .permission-board-group {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .permission-board-grid > .permission-board-group > strong {
      grid-column: 1 / -1;
    }

    #permissionGroupDetail {
      grid-template-columns: 1fr;
    }

    #permissionGroupDetail > .permission-board-group:nth-child(2) {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .permission-save-bar {
      position: sticky;
      bottom: 0;
      z-index: 5;
      margin-top: 16px;
      padding: 14px 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 -10px 24px rgba(15, 23, 42, .08);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      backdrop-filter: blur(8px);
    }

    .group-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin: 22px 0 20px;
    }

    .permission-group-layout {
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }

    .group-list {
      display: grid;
      gap: 8px;
      padding: 12px;
    }

    .group-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
      display: grid;
      gap: 5px;
      min-height: 76px;
      position: relative;
      cursor: pointer;
    }

    .group-card.active {
      border-color: #b9d4ff;
      background: #f7fbff;
    }

    .group-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .group-card h3 {
      margin: 0;
      font-size: 15px;
    }

    .group-card p {
      margin: 0;
      color: #7a8493;
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
    }

    .group-card-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #8a94a4;
      font-size: 12px;
    }

    .group-card-more {
      width: 26px;
      height: 26px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: #778196;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
    }

    .group-card-more:hover {
      background: #eef2f7;
    }

    .group-card-menu {
      position: absolute;
      top: 42px;
      right: 10px;
      z-index: 8;
      width: 104px;
      padding: 4px;
      display: grid;
      gap: 2px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
    }

    .group-card-menu button {
      height: 30px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: #3f4857;
      cursor: pointer;
      text-align: left;
      padding: 0 8px;
    }

    .group-card-menu button:hover {
      background: #f3f6fa;
    }

    .group-card-menu .danger {
      color: #e5484d;
    }

    .group-detail-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 18px;
    }

    .group-detail-tabs {
      display: flex;
      align-items: center;
      gap: 22px;
      border-bottom: 1px solid var(--line);
    }

    .group-detail-tab {
      height: 42px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: #667085;
      cursor: pointer;
      font-weight: 650;
    }

    .group-detail-tab.active {
      border-bottom-color: var(--blue);
      color: var(--blue);
    }

    .permission-tab-panel {
      display: grid;
      gap: 12px;
    }

    .login-view {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 45% 55%;
      background: #fff;
    }

    .login-art {
      padding: 0;
      overflow: hidden;
      background: #eef4fb;
    }

    .login-art h1 {
      margin: 0;
      font-size: 38px;
    }

    .login-art p {
      max-width: 640px;
      margin: 0;
      color: #667085;
      line-height: 1.8;
      font-size: 16px;
    }

    .login-art > div {
      display: none;
    }

    .login-art img {
      width: 100%;
      height: 100vh;
      object-fit: cover;
      object-position: center;
      display: block;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .login-panel {
      border-left: 0;
      padding: 56px;
      display: grid;
      place-items: center;
      background: #fff;
    }

    .login-card {
      width: 420px;
      min-height: 300px;
      border: 1px solid var(--line);
      border-radius: 8px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 34px;
      padding: 44px;
      background: #fff;
    }

    .login-product {
      display: grid;
      gap: 8px;
      justify-items: center;
      margin-bottom: 28px;
      color: #1f2937;
    }

    .login-product h1 {
      margin: 0;
      font-size: 28px;
      line-height: 1.2;
    }

    .login-product span {
      color: #8a94a4;
      font-size: 14px;
    }

    .login-tabs {
      display: flex;
      gap: 48px;
      font-size: 18px;
      font-weight: 760;
      color: #9aa4b2;
    }

    .login-tabs span:last-child {
      color: #1f2937;
      position: relative;
    }

    .login-tabs span:last-child::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -12px;
      height: 3px;
      background: var(--blue);
      border-radius: 3px;
    }

    .login-provider {
      display: flex;
      gap: 34px;
      color: #9aa4b2;
      font-weight: 650;
    }

    .login-provider span:last-child {
      color: var(--blue);
      position: relative;
    }

    .login-provider span:last-child::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -8px;
      height: 2px;
      background: var(--blue);
      border-radius: 2px;
    }

    .feishu-btn {
      height: 46px;
      width: 220px;
      justify-content: center;
      font-size: 16px;
    }


    @media (max-width: 1600px) {
      .filters {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
      }

      .dashboard-grid {
        grid-template-columns: 1fr;
      }

      .board-grid,
      .board-canvas {
        grid-template-columns: 1fr;
      }

      .permission-group-layout {
        grid-template-columns: 1fr;
      }

      .right-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

    }

    @media (max-width: 1320px) {
      .topbar {
        padding-right: 22px;
        padding-left: 28px;
      }

      .content {
        padding-left: 28px;
        padding-right: 22px;
      }

      .global-search {
        width: 210px;
      }

      .userbar {
        gap: 10px;
      }
    }

    @media (max-width: 1180px) {
      .summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .chart-wrap {
        grid-template-columns: 1fr;
      }

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

      .right-rail {
        grid-template-columns: 1fr;
      }

      .sync-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .group-summary,
      .group-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .board-stage,
      .board-cards,
      .board-kpis,
      .board-visual-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

    }

    @media (max-width: 860px) {
      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        transform: translateX(-100%);
      }

      .sidebar.mobile-open {
        transform: translateX(0);
      }

      .main,
      .sidebar.collapsed + .main {
        margin-left: 0;
      }

      .topbar,
      .content {
        padding-left: 20px;
        padding-right: 20px;
      }

      .global-search {
        display: none;
      }

      .page-head,
      .topbar {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
        height: auto;
        padding-top: 16px;
        padding-bottom: 16px;
      }

      .summary,
      .overview-modules,
      .right-rail,
      .flow,
      .board-canvas,
      .board-stage,
      .board-cards,
      .board-kpis,
      .board-visual-grid,
      .group-summary,
      .group-detail-grid {
        grid-template-columns: 1fr;
      }

      .filters {
        grid-template-columns: 1fr;
      }

      .drawer {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
      }

      .asset-info-grid {
        grid-template-columns: 1fr;
      }

      .asset-info-item {
        grid-template-columns: 76px minmax(0, 1fr);
      }
    }

    /* ============ 人群包模块（cp- 命名空间，复用原有变量与组件类） ============ */
    .cp-form { --cp-control-width: 420px; display: grid; gap: 0; background: #fff; }
    .cp-section { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .cp-section + .cp-section { border-top: 1px solid var(--line); }
    .cp-section-head { padding: 20px 0 12px; border: 0; font-weight: 720; font-size: 14px; color: #2f3b4d; display: flex; align-items: center; gap: 12px; }
    .cp-section-body { padding: 0 0 20px; }
    .cp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .cp-type-cards { display: flex; gap: 10px; flex-wrap: wrap; }
    .cp-type-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; cursor: pointer; background: #fff; text-align: left; font-weight: 650; font-size: 13.5px; color: #3f4857; }
    .cp-type-card small { display: block; color: #98a2b3; font-size: 11px; font-weight: 500; margin-top: 3px; }
    .cp-type-card:hover { border-color: #b9d4ff; }
    .cp-type-card.active { border-color: var(--blue); background: var(--blue-50); color: var(--blue-600); }
    .cp-type-card.active small { color: #6f9bef; }
    .cp-category-cards { display: flex; gap: 10px; }
    .cp-category-card { width: 128px; height: 38px; border: 1px solid #dfe5ee; border-radius: 8px; background: #fff; color: #566174; cursor: pointer; font-size: 13px; font-weight: 650; }
    .cp-category-card:hover { border-color: #b9d4ff; }
    .cp-category-card.active { border-color: var(--blue); background: var(--blue-50); color: var(--blue-600); }
    .cp-mode-field { display: grid; gap: 8px; width: var(--cp-control-width); max-width: 100%; margin-bottom: 16px; }
    .cp-mode-label { font-size: 13px; color: #566174; font-weight: 650; }
    .cp-mode-tabs { display: inline-flex; width: max-content; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .cp-mode-tabs button { border: 0; background: #fff; padding: 7px 16px; cursor: pointer; font-size: 13px; color: #5d6675; font-weight: 650; }
    .cp-mode-tabs button.active { background: var(--blue); color: #fff; }
    .cp-cond-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 650; color: #566174; font-size: 13px; }
    .cp-rule-builder { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: stretch; margin-top: 8px; }
    .cp-relation-bracket { position: relative; border: 0; background: transparent; min-height: 36px; cursor: pointer; color: #8a94a4; font-weight: 700; padding: 0; display: flex; align-items: center; justify-content: center; }
    .cp-relation-bracket::before { content: ""; position: absolute; top: 0; bottom: 0; right: 6px; width: 16px; border: 2px solid #c7d0dd; border-right: 0; border-radius: 8px 0 0 8px; }
    .cp-relation-bracket span { position: relative; z-index: 1; display: none; width: 28px; margin: 0 auto; border-radius: 999px; background: var(--blue-50); color: var(--blue-600); line-height: 24px; font-size: 13px; }
    .cp-relation-bracket span.active { display: inline-block; }
    .cp-rule-lines { min-width: 0; }
    .cp-cond-row { display: grid; grid-template-columns: 220px 180px minmax(220px, 360px) 34px; gap: 10px; margin-bottom: 10px; align-items: center; justify-content: start; }
    /* 创建表单：单列、文本框限宽，避免过宽/凌乱 */
    .cp-form .toolbar-input, .cp-form .toolbar-select { width: var(--cp-control-width); max-width: 100%; }
    .cp-form .cp-sql-editor { max-width: 760px; }
    .cp-modal-card .toolbar-input, .cp-modal-card .toolbar-select { max-width: 100%; }
    .cp-cond-row select, .cp-cond-row input { height: 36px; border: 1px solid #dfe5ee; border-radius: 8px; padding: 0 10px; width: 100%; box-sizing: border-box; background: #fff; color: #3f4857; }
    .cp-cond-row.cp-condition-invalid [data-role="val"] > :first-child,
    .cp-cond-row.cp-condition-invalid [data-role="val"] input { border-color: #ff7875; box-shadow: 0 0 0 2px rgba(255,77,79,.08); }
    .cp-cond-del { border: 0; background: #fff; color: #c0c8d4; cursor: pointer; font-size: 20px; line-height: 1; }
    .cp-cond-del:hover { color: var(--red); }
    .cp-range { display: flex; align-items: center; gap: 0; width: var(--cp-control-width); max-width: 100%; }
    .cp-range input { border-radius: 8px 0 0 8px; }
    .cp-range input + span + input { border-left: 0; border-radius: 0 8px 8px 0; }
    .cp-range span { color: #98a2b3; }
    .cp-enum { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
    .cp-enum label { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: #566174; display: inline-flex; align-items: center; gap: 5px; }
    .cp-enum label.on { border-color: var(--blue); background: var(--blue-50); color: var(--blue-600); }
    .cp-enum input { display: none; }
    .cp-sql-editor { position: relative; width: var(--cp-control-width); max-width: 100%; height: 180px; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 8px; background: #f7f8fa; box-sizing: border-box; }
    .cp-sql-editor:focus-within { border-color: #8ab7ff; box-shadow: 0 0 0 2px rgba(22,119,255,.08); }
    .cp-sql,
    .cp-sql-highlight { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 12px; border: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12.5px; line-height: 1.55; letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
    .cp-sql-highlight { pointer-events: none; overflow: hidden; color: #344054; background: transparent; }
    .cp-sql { z-index: 1; resize: none; overflow: auto; outline: 0; color: transparent; caret-color: #1f2937; background: transparent; -webkit-text-fill-color: transparent; }
    .cp-sql::placeholder { color: #98a2b3; -webkit-text-fill-color: #98a2b3; }
    .cp-sql::selection { background: rgba(22,119,255,.18); }
    .sql-token.keyword { color: #7c3aed; font-weight: 650; }
    .sql-token.function { color: #0969da; }
    .sql-token.string { color: #087f5b; }
    .sql-token.number { color: #b45309; }
    .sql-token.parameter { color: #d97706; font-weight: 600; }
    .sql-token.comment { color: #8a94a4; font-style: italic; }
    .cp-sql-note { background: #f7faff; border: 1px dashed #c3d8ff; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: #334d7a; margin-bottom: 10px; line-height: 1.6; }
    .cp-sql-note code { background: #eaf1ff; border: 1px solid #d5e3ff; border-radius: 4px; padding: 1px 5px; font-family: ui-monospace, Menlo, monospace; color: #1d4ed8; }
    .cp-params { margin-top: 14px; }
    .cp-param-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px 34px; gap: 10px; margin-bottom: 8px; align-items: center; }
    .cp-param-row select, .cp-param-row input { height: 34px; border: 1px solid #dfe5ee; border-radius: 8px; padding: 0 10px; width: 100%; box-sizing: border-box; background: #fff; }
    .cp-estimate { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .cp-estimate .is-loading { pointer-events: none; opacity: .76; }
    .cp-estimate .is-loading::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 7px; border: 2px solid #b9d4ff; border-top-color: var(--blue); border-radius: 50%; vertical-align: -2px; animation: cp-spin .7s linear infinite; }
    @keyframes cp-spin { to { transform: rotate(360deg); } }
    .cp-estimate-result { font-size: 13px; color: #0f9b7f; font-weight: 650; }
    .cp-estimate-result.err { color: var(--red); }
    .cp-radio-row { display: flex; gap: 22px; flex-wrap: wrap; }
    .cp-radio-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; color: #3f4857; }
    .cp-schedule-row { display: flex; align-items: center; gap: 8px; min-height: 36px; color: #566174; font-size: 13px; }
    .cp-schedule-row input { height: 36px; box-sizing: border-box; border: 1px solid #dfe5ee; border-radius: 8px; padding: 0 10px; background: #fff; color: #3f4857; font: inherit; }
    .cp-schedule-row input[type="time"] { width: 132px; }
    .cp-schedule-row input[type="number"] { width: 72px; text-align: center; font-variant-numeric: tabular-nums; }
    .cp-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #566174; cursor: pointer; }
    .cp-subject-label { font-size: 13px; color: #566174; font-weight: 650; }
    .cp-pending-hint { font-size: 12.5px; color: #b36b00; }
    .cp-todo { color: #d4820a; background: #fff7e6; border-radius: 5px; padding: 1px 8px; font-size: 12px; }
    .cp-muted-cell { color: #98a2b3; }
    .cp-select-wrap { position: relative; width: 100%; max-width: 100%; }
    .cp-custom-select { width: 100%; height: 36px; border: 1px solid #dfe5ee; border-radius: 8px; padding: 0 34px 0 12px; background: #fff; color: #3f4857; text-align: left; cursor: pointer; position: relative; }
    .cp-custom-select::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid #667085; border-bottom: 1.5px solid #667085; transform: translateY(-65%) rotate(45deg); }
    .cp-select-wrap.open .cp-custom-select { border-radius: 8px 8px 0 0; border-color: #b9d4ff; box-shadow: 0 0 0 3px rgba(0,102,255,.08); }
    .cp-select-menu { display: none; position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 30; max-height: 240px; overflow: auto; border: 1px solid #b9d4ff; border-top: 0; border-radius: 0 0 8px 8px; background: #fff; box-shadow: 0 10px 20px rgba(15,23,42,.08); }
    .cp-select-wrap.open .cp-select-menu { display: block; }
    .cp-select-option { padding: 9px 12px; font-size: 13px; color: #3f4857; cursor: pointer; }
    .cp-select-option:hover, .cp-select-option.active { background: var(--blue-50); color: var(--blue-600); }
    .cp-fieldlist { border: 1px solid var(--line); border-radius: 8px; max-height: 190px; overflow: auto; padding: 8px 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; }
    .cp-fieldlist label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #3f4857; cursor: pointer; padding: 3px 0; }
    .cp-fieldlist .cp-ftype { color: #98a2b3; font-size: 11px; }
    .cp-fieldlist .cp-empty { grid-column: 1 / -1; color: #98a2b3; font-size: 12px; text-align: center; padding: 14px; }
    .cp-textmulti { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid #dfe5ee; border-radius: 8px; box-sizing: border-box; padding: 4px 8px; min-height: 36px; width: 100%; max-width: 100%; background: #fff; }
    .cp-chips { display: contents; }
    .cp-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--blue-50); color: var(--blue-600); border-radius: 6px; padding: 2px 8px; font-size: 12px; }
    .cp-chip i { cursor: pointer; font-style: normal; color: #7aa2e8; }
    .cp-value-combo { position: relative; display: inline-flex; flex: 0 1 auto; width: fit-content; max-width: 100%; }
    .cp-chipin { border: 0 !important; outline: 0; flex: 0 1 auto; min-width: 96px; max-width: 100%; height: 26px !important; background: transparent; font-size: 12.5px; }
    .cp-value-menu { display: none; position: absolute; top: calc(100% + 5px); left: 0; z-index: 31; width: 100%; min-width: 140px; max-width: 260px; overflow: hidden; border: 1px solid #b9d4ff; border-radius: 8px; background: #fff; box-shadow: 0 10px 20px rgba(15,23,42,.08); }
    .cp-value-combo.open .cp-value-menu { display: block; }
    .cp-value-option { display: block; width: 100%; border: 0; padding: 9px 12px; background: #fff; color: #3f4857; text-align: left; cursor: pointer; font-size: 13px; }
    .cp-value-option:hover, .cp-value-option.active { background: var(--blue-50); color: var(--blue-600); }
    .cp-range { width: 100%; }
    .cp-range input { min-width: 0; }
    .cp-inclusive-range { display: grid; grid-template-columns: auto minmax(88px, 1fr) auto minmax(88px, 1fr) auto; gap: 8px; width: 100%; }
    .cp-inclusive-range input,
    .cp-inclusive-range input + span + input { border: 1px solid #dfe5ee; border-radius: 8px; min-width: 0; }
    .cp-inclusive-range .cp-range-word { color: #667085; font-size: 13px; white-space: nowrap; }
    .cp-relative-range { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; }
    .cp-relative-range .cp-range-word { color: #667085; font-size: 13px; white-space: nowrap; }
    .cp-relative-control { display: flex; align-items: center; width: 180px; min-width: 0; }
    .cp-relative-control input { flex: 1 1 auto; min-width: 0; border-radius: 8px 0 0 8px; }
    .cp-relative-note { color: #98a2b3; font-size: 12px; white-space: nowrap; }
    .cp-absolute-range { display: grid; grid-template-columns: auto minmax(136px, 1fr) auto minmax(136px, 1fr) auto; gap: 6px; width: 100%; }
    .cp-absolute-range input,
    .cp-absolute-range input + span + input { border: 1px solid #dfe5ee; border-radius: 8px; min-width: 0; }
    .cp-absolute-range .cp-range-word { color: #667085; font-size: 13px; white-space: nowrap; }
    .cp-relday { display: inline-flex; align-items: center; flex: 0 0 auto; height: 36px; padding: 0 12px; color: #667085; font-size: 13px; white-space: nowrap; margin-left: 0; border: 1px solid #dfe5ee; border-left: 0; border-radius: 0 8px 8px 0; background: #f8fafc; }
    .cp-output-field { width: 220px; max-width: 100%; }
    #cpFieldSelect + .cp-select-wrap { width: 220px; }
    .form-field.invalid .cp-custom-select, .form-field.invalid .cp-user-picker input, .form-field.invalid .cp-category-card { border-color: #ff7875; box-shadow: 0 0 0 2px rgba(255,77,79,.08); }
    .cp-user-picker { position: relative; width: var(--cp-control-width); max-width: 100%; }
    .cp-user-picker input { width: 100%; }
    .cp-user-menu { display: none; position: absolute; z-index: 32; top: calc(100% + 5px); left: 0; width: 100%; max-height: 220px; overflow: auto; border: 1px solid #b9d4ff; border-radius: 8px; background: #fff; box-shadow: 0 10px 20px rgba(15,23,42,.08); }
    .cp-user-picker.open .cp-user-menu { display: block; }
    .cp-user-option { padding: 9px 12px; cursor: pointer; font-size: 13px; color: #3f4857; }
    .cp-user-option small { margin-left: 8px; color: #98a2b3; font-size: 12px; }
    .cp-user-option:hover { background: var(--blue-50); color: var(--blue-600); }
    .cp-cov { display: inline-flex; align-items: center; gap: 8px; }
    .cp-cov-bar { display: inline-block; width: 84px; height: 8px; border-radius: 4px; background: #eef1f6; overflow: hidden; }
    .cp-cov-bar i { display: block; height: 100%; background: var(--blue); }
    .cp-cov-bar.low i { background: #faad14; }
    .cp-cov-num { font-size: 12px; color: #667085; font-variant-numeric: tabular-nums; }
    .cp-linkbtn { border: 0; background: transparent; color: var(--blue); cursor: pointer; font-weight: 650; padding: 0 6px 0 0; font-size: 13px; }
    .cp-linkbtn.danger { color: var(--red); }
    .cp-manage-table { min-width: 2260px; table-layout: fixed; }
    .cp-manage-table th:nth-child(1) { width: 170px; }
    .cp-manage-table th:nth-child(2), .cp-manage-table th:nth-child(3), .cp-manage-table th:nth-child(5), .cp-manage-table th:nth-child(9), .cp-manage-table th:nth-child(11) { width: 90px; }
    .cp-manage-table th:nth-child(4) { width: 220px; }
    .cp-manage-table th:nth-child(6), .cp-manage-table th:nth-child(16) { width: 160px; }
    .cp-manage-table th:nth-child(7), .cp-manage-table th:nth-child(10), .cp-manage-table th:nth-child(12) { width: 130px; }
    .cp-manage-table th:nth-child(8) { width: 110px; }
    .cp-manage-table th:nth-child(13) { width: 72px; }
    .cp-manage-table th:nth-child(14), .cp-manage-table th:nth-child(15) { width: 80px; }
    .cp-manage-table th:nth-child(17) { width: 250px; }
    .cp-manage-desc { overflow: hidden; text-overflow: ellipsis; }
    .cp-toggle-btn {
      width: 42px;
      height: 24px;
      border: 0;
      border-radius: 999px;
      padding: 2px;
      background: #d7dee9;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      transition: background .18s ease;
      vertical-align: middle;
    }
    .cp-toggle-btn::before {
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 4px rgba(15,23,42,.22);
      transition: transform .18s ease;
    }
    .cp-toggle-btn.on {
      background: var(--blue);
    }
    .cp-toggle-btn.on::before {
      transform: translateX(18px);
    }
    .cp-status-cell {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    .cp-used-tag {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      background: #eef6ff;
      color: var(--blue-600);
      font-size: 12px;
      font-weight: 650;
    }
    .cp-used-tag.off {
      background: #f2f4f7;
      color: #98a2b3;
      font-weight: 500;
    }
    .cp-mask { position: fixed; inset: 0; background: rgba(15,23,42,.35); opacity: 0; pointer-events: none; transition: .2s; z-index: 40; }
    .cp-mask.open { opacity: 1; pointer-events: auto; }
    .cp-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 560px; max-width: 92vw; background: #fff; box-shadow: -12px 0 40px rgba(15,23,42,.14); transform: translateX(100%); transition: transform .24s ease; z-index: 41; display: flex; flex-direction: column; }
    .cp-drawer.open { transform: none; }
    .cp-drawer-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
    .cp-drawer-head h2 { margin: 0; font-size: 16px; }
    .cp-x { margin-left: auto; border: 0; background: transparent; font-size: 22px; cursor: pointer; color: #98a2b3; }
    .cp-drawer-body { padding: 18px 22px; overflow: auto; }
    .cp-run-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
    .cp-run-summary > div { padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; }
    .cp-run-summary span { display: block; color: #667085; font-size: 12px; }
    .cp-run-summary strong { display: block; margin-top: 4px; color: #1d2939; font-size: 17px; }
    .cp-run-item { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
    .cp-run-item .cp-run-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .cp-run-item .cp-run-meta { font-size: 12px; color: #667085; line-height: 1.7; }
    .cp-run-cbid { font-size: 12px; color: #566174; margin-top: 6px; }
    .cp-run-cbid code { background: var(--blue-50); color: var(--blue-600); border-radius: 5px; padding: 1px 7px; font-family: ui-monospace, Menlo, monospace; }
    .cp-rule-icon {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border: 1px solid #c3d8ff;
      border-radius: 5px;
      background: #f7faff;
      color: #2454a6;
      font-size: 11px;
      font-weight: 650;
      cursor: default;
      vertical-align: middle;
    }
    .cp-rule-glyph {
      width: 9px;
      height: 11px;
      border: 1.5px solid currentColor;
      border-radius: 2px;
      position: relative;
    }
    .cp-rule-glyph::before,
    .cp-rule-glyph::after {
      content: "";
      position: absolute;
      left: 2px;
      right: 2px;
      height: 1.5px;
      background: currentColor;
      border-radius: 1px;
    }
    .cp-rule-glyph::before { top: 3px; }
    .cp-rule-glyph::after { top: 6px; }
    .cp-rule-popover { display: none; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 9px 10px; border: 1px solid #c3d8ff; border-radius: 6px; background: #f7faff; color: #334d7a; font-size: 12px; font-weight: 500; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
    .cp-run-item:has(.cp-rule-icon:hover) .cp-rule-popover, .cp-run-item:has(.cp-rule-icon:focus-visible) .cp-rule-popover { display: block; }
    .cp-run-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: #667085; }
    .cp-run-pager .pagination-btn { margin-left: 6px; }
    .cp-run-jump {
      width: 56px;
      height: 32px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 8px;
      color: #3f4857;
      text-align: center;
    }
    .cp-run-pager-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .cp-modal { position: fixed; inset: 0; display: none; place-items: center; background: rgba(15,23,42,.4); z-index: 50; }
    .cp-modal.open { display: grid; }
    .cp-modal-card { background: #fff; border-radius: 14px; width: 520px; max-width: 92vw; padding: 22px 24px; max-height: 88vh; overflow: auto; }
    .cp-modal-card h3 { margin: 0 0 16px; font-size: 17px; }
    .cp-confirm-text { color: #566174; font-size: 13.5px; line-height: 1.7; margin: 0 0 4px; }
    .cp-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
    .cp-toast { position: fixed; top: 92px; right: 28px; min-width: 220px; background: #1f2937; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 14px 28px rgba(15,23,42,.18); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: .2s; z-index: 60; }
    .cp-toast.show { opacity: 1; transform: none; }