:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --line: #e8e8e8;
  --line-strong: #d9d9d9;
  --text: #333333;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --brand: #006eff;
  --brand-hover: #0057d9;
  --brand-soft: #e8f3ff;
  --accent: #ff6a00;
  --ok: #00a700;
  --warn: #ffc440;
  --danger: #e40000;
  --sidebar-w: 220px;
  --topbar-h: 48px;
  --radius: 2px;
  --radius-sm: 2px;
  --font: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "Menlo", "Consolas", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.app-root { min-height: 100vh; display: flex; flex-direction: column; }

/* ========== Global Topbar (Aliyun-like) ========== */
.global-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
}

.gt-left, .gt-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.gt-left {
  gap: 8px;
}
.gt-right { justify-content: flex-end; }

.gt-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: #111;
  min-width: 0;
}
.gt-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.gt-logo.gt-logo-img,
img.gt-logo {
  background: transparent;
  object-fit: contain;
  padding: 0;
}
.gt-name {
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.gt-divider {
  width: 1px;
  height: 14px;
  background: #e5e5e5;
}
.gt-product {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.gt-product:hover { color: var(--brand); }

/* Topbar dropdowns */
.gt-dropdown { position: relative; }
.gt-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #333;
  cursor: pointer;
  font-size: 13px;
  border-radius: 2px;
}
.gt-dd-trigger:hover,
.gt-dropdown.open .gt-dd-trigger {
  background: #f5f5f5;
  color: var(--brand);
}
.gt-region-trigger { font-weight: 500; }
.gt-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  background: #fff;
  border: 1px solid #e8e8e8;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 220px;
  max-height: min(70vh, 520px);
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 0;
  box-sizing: border-box;
}
.gt-dropdown.open .gt-dd-panel { display: block; }
.gt-dd-panel-sm { min-width: 200px; }
.gt-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  color: #333;
  font-size: 13px;
  white-space: nowrap;
}
.gt-dd-item:hover { background: #f5f5f5; color: var(--brand); }
.gt-dd-item.active {
  background: #e8f3ff;
  color: var(--brand);
  font-weight: 600;
}
.gt-dd-item.disabled {
  color: #bbb;
  cursor: not-allowed;
}
.gt-dd-tag {
  font-size: 11px;
  color: #999;
  font-weight: 400;
}
.gt-count {
  min-width: 18px;
  padding: 0 6px;
  height: 18px;
  border-radius: 9px;
  background: #f0f0f0;
  color: #666;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.gt-dd-item.active .gt-count {
  background: #d6e8ff;
  color: var(--brand);
}

.gt-region-panel {
  width: min(720px, calc(100vw - 24px));
  padding: 8px 12px 12px;
  left: 0;
}
.gt-region-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gt-region-panel-compact {
  width: 240px;
  padding: 6px 0;
}
.gt-region-panel-compact .gt-region-head {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.gt-region-head {
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 8px;
  padding-bottom: 4px;
}
.gt-region-head .gt-dd-item {
  width: 100%;
  min-height: 34px;
}
.gt-region-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: start;
}
.gt-region-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.gt-region-col .gt-dd-item {
  width: 100%;
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
}
.gt-region-title {
  padding: 6px 10px 4px;
  font-size: 12px;
  color: #999;
  font-weight: 600;
}
.gt-region-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gt-region-panel .gt-count {
  flex-shrink: 0;
  margin-left: auto;
}

.gt-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.gt-filters .gt-dd-trigger {
  max-width: 180px;
}
.gt-filters .gt-dd-trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-right {
  justify-self: end;
}

.gt-link {
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}
.gt-link:hover { color: var(--brand); }

.gt-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
  border-left: 1px solid #eee;
}
.gt-user-trigger {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px 4px 12px;
  border-radius: 4px;
  margin-left: 0;
}
.gt-user-trigger:hover {
  background: #f5f5f5;
}
.gt-user-dropdown {
  position: relative;
}
.gt-user-panel {
  right: 0;
  left: auto;
  min-width: 160px;
}
.gt-user-panel .gt-dd-item {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.gt-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8f3ff;
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
}
.gt-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.gt-user-meta strong {
  font-size: 12px;
  font-weight: 600;
  color: #111;
}
.gt-user-meta span {
  font-size: 11px;
  color: #999;
}
.gt-logout {
  margin-left: 4px;
  color: #999;
  font-size: 12px;
}
.gt-logout:hover { color: var(--brand); }

.menu-toggle {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #334155;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.menu-toggle:hover {
  color: var(--brand);
  background: #f5f7fa;
  border-color: #e8e8e8;
}
.menu-toggle:active {
  background: #eef2f7;
}
.menu-toggle-icon {
  display: block;
}

/* ========== Body + Light Sidebar ========== */
.app-body {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  transition: grid-template-columns .22s var(--ease);
}

.app-root.sidebar-collapsed .app-body {
  grid-template-columns: 0 minmax(0, 1fr);
}
.app-root.sidebar-collapsed .sidebar {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border-right-width: 0;
}

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  background: #f7f7f7;
  border-right: 1px solid #ebebeb;
  padding: 12px 0 20px;
  overflow: auto;
  z-index: 30;
  transition: opacity .18s var(--ease);
}

.nav-section {
  padding: 10px 16px 6px;
  font-size: 12px;
  color: #999;
}

.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 2px;
  color: #333;
  font-size: 13px;
}
.nav a svg { width: 16px; height: 16px; color: #666; }
.nav a:hover { background: #eee; }
.nav a.active {
  background: #e8f3ff;
  color: var(--brand);
  font-weight: 600;
}
.nav a.active svg { color: var(--brand); }

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #333;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.nav-group-toggle svg { width: 16px; height: 16px; color: #666; flex-shrink: 0; }
.nav-group-toggle .nav-group-caret {
  width: 12px;
  height: 12px;
  margin-left: auto;
  transition: transform .18s var(--ease);
}
.nav-group.open .nav-group-toggle .nav-group-caret { transform: rotate(180deg); }
.nav-group-toggle:hover { background: #eee; }
.nav-group-toggle.active {
  background: #e8f3ff;
  color: var(--brand);
  font-weight: 600;
}
.nav-group-toggle.active svg { color: var(--brand); }
.nav-sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 4px 26px;
}
.nav-group.open .nav-sub { display: flex; }
.nav-sub a {
  padding: 7px 10px;
  font-size: 13px;
  color: #555;
}
.nav-sub a.active {
  background: #e8f3ff;
  color: var(--brand);
  font-weight: 600;
}

.main { min-width: 0; background: var(--bg); }
.content {
  padding: 16px 20px 28px;
  width: 100%;
}
.content-console { padding: 12px 16px 24px; }

.crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: #999;
  font-size: 12px;
}
.crumb a:hover { color: var(--brand); }

/* ========== Console instance page ========== */
.console-page { max-width: 100%; }
.console-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.console-title-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.console-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111;
  letter-spacing: 0;
  flex-shrink: 0;
}
.console-title-divider {
  width: 1px;
  height: 18px;
  background: #d9d9d9;
  flex-shrink: 0;
}
.console-scope-filters {
  min-width: 0;
}
.console-scope-filters .gt-dd-trigger {
  height: 32px;
  font-size: 13px;
}
.console-region-static {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
}
.console-region-static .gt-count {
  margin-left: 2px;
}
.console-title-links { display: flex; gap: 12px; }

.provider-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 12px;
}
.provider-tab {
  position: relative;
  padding: 10px 16px;
  font-size: 13px;
  color: #666;
}
.provider-tab:hover { color: var(--brand); }
.provider-tab.active {
  color: var(--brand);
  font-weight: 600;
}
.provider-tab.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
}
.provider-tab.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.console-toolbar {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.console-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.console-filter-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
  flex-wrap: nowrap;
}
.console-filter-form .select-compact {
  flex: 0 0 auto;
  width: auto;
  max-width: 130px;
}
.console-search {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.console-search .input {
  border-right: 0;
  border-radius: 2px 0 0 2px;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
}
.console-search .input::-webkit-search-decoration,
.console-search .input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.console-search .btn {
  border-radius: 0 2px 2px 0;
  flex-shrink: 0;
}

.select-compact, .input-compact, .btn-compact {
  height: 32px;
}
.icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); }
.icon-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.icon-btn-danger:hover:not(:disabled) {
  color: #e5484d;
  border-color: #f3b4b4;
  background: #fff7f7;
}
.icon-btn.is-spinning svg {
  animation: iconSpin 0.8s linear infinite;
}
@keyframes iconSpin {
  to { transform: rotate(360deg); }
}

/* Instance table */
.instance-table-wrap {
  background: #fff;
  border: 1px solid #e8e8e8;
  overflow: hidden;
}
.instance-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #c4c4c4 #f5f5f5;
}
.instance-table-scroll:focus {
  outline: none;
}
.instance-table-scroll::-webkit-scrollbar {
  height: 10px;
}
.instance-table-scroll::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-top: 1px solid #eee;
}
.instance-table-scroll::-webkit-scrollbar-thumb {
  background: #c4c4c4;
  border-radius: 6px;
  border: 2px solid #f5f5f5;
}
.instance-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.instance-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
.instance-table th,
.instance-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  font-size: 12px;
  background: #fff;
}
.instance-table th {
  background: #fafafa;
  color: #666;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 2;
}
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
  user-select: none;
}
.th-sort:hover {
  color: var(--brand, #006eff);
}
.th-sort.is-active {
  color: var(--brand, #006eff);
}
.th-sort-icons {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 10px;
  height: 14px;
}
.th-sort-up,
.th-sort-down {
  display: block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  opacity: 0.35;
}
.th-sort-up {
  border-bottom: 4px solid currentColor;
}
.th-sort-down {
  border-top: 4px solid currentColor;
}
.th-sort.is-asc .th-sort-up,
.th-sort.is-desc .th-sort-down {
  opacity: 1;
}
.instance-table tbody tr:hover td { background: #f7fbff; }
.instance-table tbody tr.is-just-created td {
  background: #eef6ff;
  animation: swas-created-fade 2.4s ease forwards;
}
@keyframes swas-created-fade {
  0% { background: #dcebff; }
  70% { background: #eef6ff; }
  100% { background: transparent; }
}
.instance-table tr:last-child td { border-bottom: 0; }

.instance-table .col-check {
  width: 42px;
  min-width: 42px;
  text-align: center;
  padding-left: 10px;
  padding-right: 8px;
}
.instance-table .col-id {
  width: auto;
  min-width: 220px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cdn-domain-text {
  word-break: break-all;
  font-weight: 600;
}
.cdn-cname-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.cdn-cname-cell .mono {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.instance-table .col-status { min-width: 88px; }
.instance-table .col-expire { min-width: 132px; white-space: nowrap; }
.instance-table .col-provider { min-width: 72px; }
.instance-table .col-os { min-width: 140px; }
.instance-table .col-zone { min-width: 160px; }
.instance-table .col-spec { min-width: 140px; }
.instance-table .col-ip { min-width: 140px; }
.instance-table .col-traffic { min-width: 148px; }
.instance-table .col-ops {
  width: 1%;
  min-width: 0;
  white-space: nowrap;
  position: sticky;
  right: 0;
  z-index: 3;
  box-shadow: -8px 0 10px -8px rgba(0, 0, 0, 0.12);
}
.instance-table th.col-ops {
  z-index: 4;
  background: #fafafa;
}
.instance-table tbody tr:hover td.col-ops {
  background: #f7fbff;
}

.cell-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.cell-sub { color: #999; font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; }

.instance-id-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--brand);
  cursor: pointer;
  font-weight: 500;
  text-align: left;
}
.instance-id-link:hover { text-decoration: underline; }

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #333;
  font-weight: 400;
  background: none;
  padding: 0;
}
.status-dot i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c0c0c0;
  flex-shrink: 0;
}
.status-dot.status-running i { background: var(--ok); }
.status-dot.status-stopped i { background: #ffc440; }
.status-dot.status-starting i,
.status-dot.status-rebooting i,
.status-dot.status-configuring i,
.status-dot.status-pending i { background: #006eff; }
.status-dot.status-stopping i { background: #e40000; }

.ip-stack em {
  display: inline-block;
  min-width: 14px;
  margin-right: 4px;
  color: #999;
  font-style: normal;
  font-size: 11px;
}
.ip-line {
  display: block;
  min-width: 0;
}
.ip-copy {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-family: var(--mono);
  font-size: 12px;
  line-height: inherit;
  cursor: pointer;
  text-align: left;
  word-break: break-all;
  border-radius: 2px;
}
.ip-copy:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ip-copy:focus-visible {
  outline: 2px solid rgba(0, 110, 255, 0.28);
  outline-offset: 2px;
}
.ip-copy.is-copied {
  color: var(--ok);
  text-decoration: none;
}
.ip-copy-sep {
  color: #999;
  font-family: var(--mono);
  font-size: 12px;
}
.kv dd .ip-copy {
  color: #333;
}

.op-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0;
}
.op-link {
  border: 0;
  background: none;
  padding: 0 2px;
  color: var(--brand);
  cursor: pointer;
  font-size: 12px;
}
.op-link:hover { text-decoration: underline; }
.op-link:disabled {
  color: #bbb;
  cursor: not-allowed;
  text-decoration: none;
}
.op-sep {
  color: #d9d9d9;
  margin: 0 4px;
  user-select: none;
}

.domain-dns-form {
  display: grid;
  gap: 14px;
}
.domain-dns-modal {
  width: min(480px, 100%);
}
.domain-transfer-modal {
  width: min(480px, 100%);
}
.domain-transfer-form {
  display: grid;
  gap: 14px;
}
.domain-transfer-body {
  position: relative;
}
.domain-transfer-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  text-align: center;
}
.domain-transfer-loading[hidden] {
  display: none;
}
.domain-transfer-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #e8eef7;
  border-top-color: var(--brand);
  animation: transferSpin 0.75s linear infinite;
}
.domain-transfer-loading-title {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}
.domain-transfer-loading-text {
  margin: 0;
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  max-width: 260px;
}
.domain-transfer-modal.is-loading .modal-footer .btn,
.domain-transfer-modal.is-loading [data-close-transfer-modal] {
  pointer-events: none;
  opacity: 0.55;
}
.domain-transfer-pending {
  color: var(--brand) !important;
}
@keyframes transferSpin {
  to { transform: rotate(360deg); }
}
.domain-dns-summary {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: #f7f8fa;
  border: 1px solid #ebebeb;
}
.domain-dns-summary-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.domain-dns-summary-label {
  color: #888;
  line-height: 1.5;
  padding-top: 1px;
}
.domain-dns-domain {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  word-break: break-all;
  line-height: 1.4;
}
.domain-dns-provider-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid #d6e4ff;
  background: #f0f5ff;
  color: var(--brand);
  font-size: 12px;
  font-weight: 500;
  width: fit-content;
}
.domain-dns-provider-tag.is-tencent {
  border-color: #d3e4ff;
  background: #eef5ff;
  color: #0052d9;
}
.domain-dns-current {
  color: #333;
  line-height: 1.55;
  word-break: break-all;
  font-size: 12px;
}
.domain-dns-mode {
  display: grid;
  gap: 8px;
}
.domain-dns-mode-item {
  display: block;
  cursor: pointer;
  margin: 0;
}
.domain-dns-mode-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.domain-dns-mode-card {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  background: #fff;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.domain-dns-mode-card strong {
  font-size: 13px;
  font-weight: 600;
  color: #222;
}
.domain-dns-mode-card em {
  font-style: normal;
  font-size: 12px;
  color: #888;
  line-height: 1.4;
}
.domain-dns-mode-item input:checked + .domain-dns-mode-card {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.domain-dns-mode-item input:focus-visible + .domain-dns-mode-card {
  box-shadow: 0 0 0 1px var(--brand);
}
.domain-dns-aliyun-tip {
  padding: 10px 12px;
  border: 1px solid #d6e4ff;
  background: #f0f5ff;
  color: #1d39c4;
  font-size: 12px;
  line-height: 1.6;
}
.domain-dns-form .field[hidden],
.domain-dns-aliyun-tip[hidden] {
  display: none !important;
}

/* 域名列表 DNS 列（移动端折叠） */
.instance-table .col-spec.domain-dns-col {
  white-space: normal;
  vertical-align: top;
}
.domain-list-dns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  max-width: 220px;
}
.domain-list-dns-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}
.domain-list-dns-line {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.domain-list-dns.is-collapsible:not(.is-expanded) .domain-list-dns-line.is-extra {
  display: none;
}
.domain-list-dns-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}
.domain-list-dns-toggle:hover { text-decoration: underline; }
.domain-list-dns-toggle[hidden] { display: none !important; }
@media (max-width: 720px) {
  .instance-table .col-spec.domain-dns-col {
    min-width: 88px;
    max-width: 112px;
  }
  .domain-list-dns {
    max-width: 100%;
  }
  .domain-list-dns-line {
    font-size: 11px;
    line-height: 1.4;
  }
}

.textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
  background: #fff;
}
.textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}
.table-footer-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 12px;
}
.page-btn:hover { color: var(--brand); border-color: var(--brand); }
.page-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.page-btn.disabled {
  color: #bbb;
  border-color: #eee;
  pointer-events: none;
  background: #fafafa;
}
.page-ellipsis { color: #999; padding: 0 2px; }
.page-size .select { min-width: 96px; }
.muted { color: #999; }
.text-link { color: var(--brand); }
.text-link:hover { text-decoration: underline; }

.empty {
  padding: 64px 24px;
  text-align: center;
  color: #999;
  background: #fff;
}
.empty strong {
  display: block;
  color: #333;
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 600;
}

/* ========== Shared buttons / forms ========== */
.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0 12px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary {
  background: #fff;
  border-color: #d9d9d9;
  color: #333;
}
.btn-secondary:hover { color: var(--brand); border-color: var(--brand); }
.btn-danger {
  background: #fff;
  border-color: #ffccc7;
  color: var(--danger);
}
.btn-ghost {
  background: transparent;
  color: #666;
  height: 28px;
}
.btn-sm { height: 28px; padding: 0 10px; }

.input, .select {
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 0 8px;
  background: #fff;
  min-width: 140px;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(0,110,255,0.12);
}

.field { display: grid; gap: 6px; margin-bottom: 0; }
.field[hidden] { display: none !important; }
.field label { font-size: 12px; font-weight: 500; color: #333; }
.field .hint { font-size: 12px; color: #999; line-height: 1.5; }

/* ========== Other pages keep usable ========== */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.page-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: #111;
}
.page-desc {
  margin: 0;
  color: #666;
  font-size: 12px;
  line-height: 1.6;
  max-width: 720px;
}
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat {
  background: #fff;
  border: 1px solid #e8e8e8;
  padding: 16px;
}
.stat .label { color: #999; font-size: 12px; }
.stat .value {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 600;
  color: #111;
  letter-spacing: -0.02em;
}
.stat .hint { margin-top: 6px; color: #999; font-size: 12px; }

.panel, .provider-card, .card {
  background: #fff;
  border: 1px solid #e8e8e8;
}
.panel-head, .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.panel-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.panel-body { padding: 16px; }

.settings-panel { width: 100%; }
.settings-form {
  display: grid;
  gap: 16px;
}
.form-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.settings-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.asset-upload {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e8eaed;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}
.asset-upload-preview {
  width: 84px;
  height: 84px;
  border: 1px dashed #d0d5dd;
  background:
    linear-gradient(45deg, #f3f4f6 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(-45deg, #f3f4f6 25%, transparent 25%) 0 6px / 12px 12px,
    linear-gradient(45deg, transparent 75%, #f3f4f6 75%) 6px -6px / 12px 12px,
    linear-gradient(-45deg, transparent 75%, #f3f4f6 75%) -6px 0 / 12px 12px,
    #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.asset-upload-preview.has-file {
  border-style: solid;
  border-color: #e5e7eb;
  background: #fff;
}
.asset-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}
.asset-upload-empty {
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
  line-height: 1.35;
  padding: 0 8px;
}
.asset-upload-body {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.asset-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.asset-upload-pick {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
}
.asset-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.asset-upload-hint {
  font-size: 12px;
  color: #8b919a;
  line-height: 1.5;
}
@media (max-width: 800px) {
  .settings-brand-grid { grid-template-columns: 1fr; }
  .asset-upload {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }
  .asset-upload-preview {
    width: 72px;
    height: 72px;
  }
}

/* legacy aliases kept for safety */
.brand-upload {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.brand-preview {
  width: 72px;
  height: 72px;
  border: 1px solid #e8e8e8;
  background: #fafafa;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.brand-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.brand-preview-empty {
  font-size: 12px;
  color: #999;
}
.brand-upload-controls {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 8px;
}
.brand-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

.settings-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #eee;
  background: #fafafa;
}
.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.settings-section-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #222;
}
.settings-section-head p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}
.settings-turnstile-fields {
  display: grid;
  gap: 14px;
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #d4d4d8;
  transition: background .18s ease;
  flex-shrink: 0;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform .18s ease;
}
.switch input:checked + .switch-track {
  background: var(--brand);
}
.switch input:checked + .switch-track::after {
  transform: translateX(18px);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid rgba(0, 110, 255, 0.28);
  outline-offset: 2px;
}
.switch-text {
  font-size: 12px;
  color: #666;
  min-width: 42px;
}
@media (max-width: 640px) {
  .settings-section-head {
    flex-direction: column;
  }
}

.admin-table-wrap { overflow: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}
.admin-table .col-ops {
  width: 1%;
  white-space: nowrap;
}
.admin-table th,
.admin-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.admin-table th {
  background: #fafafa;
  color: #666;
  font-weight: 500;
  font-size: 12px;
}
.admin-table tbody tr:hover { background: #fafcff; }
.admin-table .empty-cell {
  text-align: center;
  color: #999;
  padding: 32px 16px;
}
.tag-self {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--brand);
  background: #e8f3ff;
  border-radius: 2px;
  vertical-align: middle;
}
.text-danger { color: #d93026 !important; }
.text-danger:hover { color: #b3261e !important; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}
.provider-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: auto;
  padding: 16px;
}
.provider-card.coming-soon { opacity: 0.7; background: #fafafa; }
.provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
}
.provider-logo {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.provider-logo.provider-logo-img {
  background: #f5f5f5;
  border: 1px solid #eee;
  padding: 2px;
}
.provider-logo.provider-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.provider-cell {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.provider-cell-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 88px;
  object-fit: contain;
}
.card-meta { color: #666; font-size: 12px; line-height: 1.7; flex: 1; }
.meta-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  padding: 3px 0;
}
.meta-row dt { color: #999; }
.meta-row dd { margin: 0; color: #333; word-break: break-all; }
.account-slot-stack {
  position: relative;
  margin-top: 0;
}
.account-slot-stack.has-multiple {
  /* 后方槽位只露出一条顶栏，避免把整张厂商卡片撑高 */
  padding-top: 12px;
}
.account-slot-card {
  position: relative;
  border: 1px solid #e5e8ef;
  background: #f7f8fa;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.account-slot-stack.has-multiple .account-slot-card:not(.is-active) {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 34px;
  cursor: pointer;
  opacity: .78;
  z-index: calc(8 + var(--stack-index, 1));
  transform: none;
}
.account-slot-stack.has-multiple .account-slot-card:not(.is-active) .account-slot-tab {
  border-bottom: none;
  height: 100%;
  box-sizing: border-box;
}
.account-slot-stack.has-multiple .account-slot-card:not(.is-active):hover {
  opacity: .95;
  border-color: #b7c4d8;
}
.account-slot-stack.has-multiple .account-slot-card.is-active {
  position: relative;
  z-index: 20;
  cursor: default;
  background: #fff;
  border-color: #c9d4e5;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
  transform: none;
  opacity: 1;
}
.account-slot-stack.has-multiple .account-slot-card:not(.is-active) .account-slot-body {
  display: none;
}
.account-slot-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #eef2f7 0%, #e8edf4 100%);
  border-bottom: 1px solid #e5e8ef;
  font-size: 12px;
}
.account-slot-card.is-active .account-slot-tab {
  background: linear-gradient(180deg, #f5f8fc 0%, #edf2f8 100%);
}
.account-slot-tab-label {
  font-weight: 600;
  color: #1f2329;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-slot-tab-no {
  color: #8a94a6;
  flex-shrink: 0;
}
.account-slot-body {
  padding: 10px 12px 12px;
}
.account-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.account-slot-head strong {
  color: #1f2329;
  margin-right: 8px;
}
.account-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status-running { color: var(--ok); }
.status-stopped { color: #d4a017; }
.status-starting, .status-rebooting, .status-configuring, .status-pending { color: var(--brand); }
.status-stopping { color: var(--danger); }
.status-unknown { color: #999; }

.alert {
  padding: 10px 12px;
  border: 1px solid #91caff;
  background: #e6f4ff;
  color: #0958d9;
  margin-bottom: 12px;
  line-height: 1.55;
}
.alert-danger {
  border-color: #ffccc7;
  background: #fff2f0;
  color: #cf1322;
}
.alert-warning {
  border-color: #ffe58f;
  background: #fffbe6;
  color: #ad6800;
}
.alert-info {
  border-color: #91caff;
  background: #e6f4ff;
  color: #0958d9;
}
.link { color: var(--brand); font-weight: 500; }
.link:hover { text-decoration: underline; }

/* Modal / Drawer */
.modal-backdrop, .drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease);
}
.modal-backdrop.open, .drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  width: min(480px, 100%);
  background: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.modal.modal-lg {
  width: min(720px, 100%);
  max-height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
}
.modal.modal-lg .modal-body {
  overflow: auto;
}
.modal-header, .drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.modal-header h3, .drawer-header strong {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.modal-body { padding: 16px; display: grid; gap: 12px; }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}
.modal-footer-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Confirm / Alert dialog (replaces browser confirm/alert) */
.confirm-backdrop {
  z-index: 1300; /* 高于目录同步锁定层 (1200) */
}
.confirm-modal {
  width: min(420px, 100%);
  border-radius: var(--radius);
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.confirm-backdrop.open .confirm-modal {
  transform: none;
  opacity: 1;
}
.confirm-modal .modal-header {
  padding: 14px 16px 0;
  border-bottom: 0;
}
.confirm-modal .modal-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.confirm-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.confirm-close:hover {
  color: var(--text);
  background: #f5f5f5;
}
.confirm-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px 4px;
}
.confirm-icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.confirm-icon svg {
  width: 14px;
  height: 14px;
}
.confirm-icon-info {
  background: var(--brand-soft);
  color: var(--brand);
}
.confirm-icon-warning {
  background: #fff7e6;
  color: #d48806;
}
.confirm-icon-danger {
  background: #fff1f0;
  color: var(--danger);
}
.confirm-message {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
}
.confirm-modal .modal-footer {
  justify-content: flex-end;
  gap: 8px;
  padding: 16px;
  border-top: 0;
  background: #fff;
}
.btn-danger-fill {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger-fill:hover {
  background: #c10000;
  border-color: #c10000;
  color: #fff;
}

/* Stop instance modal (Aliyun console style) */
.stop-lead {
  margin: 0;
  font-size: 13px;
  color: #333;
  line-height: 1.6;
}
.stop-lead .stop-count {
  color: var(--brand);
  font-weight: 600;
}
.stop-instance-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  background: #f5f5f5;
  border: 1px solid #ebebeb;
  font-size: 13px;
  color: #333;
}
.stop-slash { color: #999; }
.stop-billing-tag {
  margin-left: auto;
  font-size: 12px;
  color: #666;
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 1px 8px;
}
.icon-copy {
  border: 0;
  background: transparent;
  color: #999;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.icon-copy:hover { color: var(--brand); }
.stop-field { display: grid; gap: 10px; }
.stop-field-label {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stop-field-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--brand);
}
.stop-radio-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.stop-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}
.stop-mode-cards {
  display: grid;
  gap: 12px;
}
.stop-mode-card {
  display: block;
  cursor: pointer;
  border: 1px solid #e5e5e5;
  background: #fff;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.stop-mode-card > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.stop-mode-card.active,
.stop-mode-card:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.stop-mode-card-inner { padding: 14px 16px; }
.stop-mode-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  margin-bottom: 8px;
}
.stop-mode-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #c4c4c4;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
}
.stop-mode-card.active .stop-mode-radio,
.stop-mode-card:has(input:checked) .stop-mode-radio {
  border-color: var(--brand);
}
.stop-mode-card.active .stop-mode-radio::after,
.stop-mode-card:has(input:checked) .stop-mode-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--brand);
}
.stop-mode-desc {
  font-size: 13px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 8px;
}
.stop-mode-extra {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}
.stop-mode-list {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 13px;
  color: #333;
  line-height: 1.7;
}
.stop-mode-note {
  background: #fffbe6;
  border: 1px solid #ffe58f;
  padding: 10px 12px;
  font-size: 12px;
  color: #614700;
  line-height: 1.65;
}
.stop-mode-note strong {
  display: block;
  margin-bottom: 4px;
  color: #ad6800;
}
.stop-mode-note ul {
  margin: 0;
  padding-left: 18px;
}
.stop-mode-note-spot {
  margin-top: 10px;
  background: #fff7e6;
  border-color: #ffd591;
}
.stop-prepaid-tip,
.stop-billing-tip {
  background: #fffbe6;
  border: 1px solid #ffe58f;
  padding: 10px 12px;
  font-size: 12px;
  color: #614700;
  line-height: 1.65;
}
.stop-billing-tip strong {
  color: #ad6800;
  margin-right: 6px;
}
.stop-prepaid-tip[hidden],
.stop-field[hidden],
[data-spot-only][hidden] {
  display: none !important;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(440px, 100%);
  height: 100%;
  background: #fff;
  box-shadow: -8px 0 24px rgba(0,0,0,0.12);
  transform: translateX(100%);
  transition: transform .22s var(--ease);
  z-index: 65;
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-body { padding: 8px 16px 24px; overflow: auto; }
.kv {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  font-size: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #f0f0f0;
}
.kv dt { color: #999; }
.kv dd { margin: 0; word-break: break-all; color: #333; }

.toast-wrap {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  min-width: 220px;
  max-width: 360px;
  background: #111;
  color: #fff;
  padding: 10px 12px;
  font-size: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  animation: toastIn 0.22s var(--ease) both;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.toast-out {
  opacity: 0;
  transform: translateY(-6px);
}
.toast.error { background: #cf1322; }
.toast.success { background: #389e0d; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Auth / Install */
.install-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: linear-gradient(180deg, #f0f5ff 0%, #f5f5f5 40%, #f5f5f5 100%);
}
.install-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.install-wrap { width: min(760px, 100%); }
.install-card { padding: 20px; margin-bottom: 12px; }
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.install-hero { margin-bottom: 14px; }
.install-hero h1 { margin: 0 0 6px; font-size: 22px; color: #111; }
.install-hero p { margin: 0; color: #666; }
.steps { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.step-pill {
  padding: 4px 10px;
  background: #e8f3ff;
  color: var(--brand);
  font-size: 12px;
}
.req-list { display: grid; gap: 8px; }
.req-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #f0f0f0;
  background: #fafafa;
}
.req-item.ok { border-color: #b7eb8f; background: #f6ffed; }
.req-item.bad { border-color: #ffa39e; background: #fff2f0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.install-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Modern split login */
.login-body {
  min-height: 100vh;
  background: #fff;
  font-family: "Plus Jakarta Sans", "Noto Sans SC", var(--font);
}
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.login-visual {
  position: relative;
  overflow: hidden;
  color: #f4f7fb;
  background: #0b1220;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 5vw, 56px);
  isolation: isolate;
}
.login-visual-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(0, 110, 255, 0.28), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(14, 165, 233, 0.18), transparent 50%),
    linear-gradient(160deg, #0b1220 0%, #111827 48%, #0f172a 100%);
  z-index: -3;
}
.login-visual-grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: rotate(-8deg);
  opacity: 0.7;
  animation: loginGridDrift 28s linear infinite;
  z-index: -2;
}
.login-visual-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
.login-visual-glow-a {
  width: 280px;
  height: 280px;
  left: -60px;
  bottom: 12%;
  background: rgba(0, 110, 255, 0.35);
  animation: loginGlowPulse 7s ease-in-out infinite;
}
.login-visual-glow-b {
  width: 220px;
  height: 220px;
  right: 8%;
  top: 18%;
  background: rgba(56, 189, 248, 0.22);
  animation: loginGlowPulse 9s ease-in-out infinite reverse;
}
.login-visual-content {
  position: relative;
  max-width: 460px;
  animation: loginRise 0.7s var(--ease) both;
}
.login-visual-mark {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.login-visual-logo {
  display: block;
  max-width: min(180px, 55%);
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 28px;
  border-radius: 8px;
}
.login-visual-brand {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Noto Sans SC", sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
}
.login-visual-line {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.78);
  max-width: 18em;
}
.login-visual-footer {
  position: relative;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.7);
  animation: loginRise 0.7s var(--ease) 0.12s both;
}
.login-panel {
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
  background:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 42%, #ffffff 100%);
}
.login-panel-inner {
  width: min(400px, 100%);
  animation: loginRise 0.65s var(--ease) 0.08s both;
}
.login-panel-head {
  margin-bottom: 28px;
}
.login-panel-head h2 {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Noto Sans SC", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.login-panel-head p {
  margin: 8px 0 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}
.login-form {
  display: grid;
  gap: 16px;
}
.login-form .field label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.login-input {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 0 14px;
  font-size: 14px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.login-input::placeholder { color: #94a3b8; }
.login-input:hover { border-color: #cbd5e1; }
.login-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 110, 255, 0.12);
}
.login-submit {
  width: 100%;
  height: 44px;
  margin-top: 6px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.login-turnstile-field {
  min-height: 65px;
}
.login-turnstile-field .cf-turnstile {
  display: flex;
  justify-content: flex-start;
}
@keyframes loginRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes loginGridDrift {
  from { transform: rotate(-8deg) translate3d(0, 0, 0); }
  to { transform: rotate(-8deg) translate3d(48px, 24px, 0); }
}
@keyframes loginGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.08); }
}

@media (max-width: 900px) {
  .login-shell {
    grid-template-columns: 1fr;
  }
  .login-visual {
    min-height: 34vh;
    padding: 28px 24px;
  }
  .login-visual-brand {
    font-size: clamp(28px, 8vw, 40px);
  }
  .login-visual-line {
    font-size: 14px;
    margin-top: 12px;
  }
  .login-visual-footer { display: none; }
  .login-panel {
    place-items: start center;
    padding-top: 36px;
  }
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--topbar-h);
  background: rgba(0,0,0,0.35);
  z-index: 25;
}

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .global-topbar {
    grid-template-columns: auto 1fr auto;
  }
  .gt-region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-region-panel { width: min(520px, calc(100vw - 24px)); }
}

@media (max-width: 900px) {
  .app-body { grid-template-columns: 1fr; }
  .app-root.sidebar-collapsed .app-body {
    grid-template-columns: 1fr;
  }
  .app-root.sidebar-collapsed .sidebar {
    opacity: 1;
    pointer-events: auto;
    overflow: auto;
    border-right-width: 1px;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-h);
    transform: translateX(-105%);
    transition: transform .2s var(--ease);
    width: min(260px, 86vw);
    z-index: 40;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.open { display: block; }
  .gt-link { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .gt-region-grid { grid-template-columns: 1fr; }
  .gt-name { display: none; }

  .main,
  .content,
  .content-console,
  .console-page,
  .console-title-row,
  .console-title-main,
  .console-scope-filters,
  .gt-filters,
  .gt-dropdown {
    overflow: visible;
  }

  .content,
  .content-console {
    padding: 12px 12px 20px;
  }
  .console-title-row {
    margin-bottom: 10px;
  }
  .console-title-main {
    gap: 8px 10px;
    width: 100%;
  }
  .console-title {
    font-size: 16px;
  }
  .console-title-divider {
    height: 14px;
  }
  .console-scope-filters {
    width: 100%;
    flex-wrap: wrap;
  }
  .console-scope-filters .gt-dd-trigger,
  .console-region-static {
    max-width: min(100%, 220px);
  }
  .gt-dd-panel {
    min-width: min(200px, calc(100vw - 20px));
    max-height: min(70vh, 480px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  }
  .gt-dd-panel-sm {
    min-width: min(180px, calc(100vw - 20px));
  }
  .gt-region-panel {
    left: 0;
    right: auto;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    padding: 10px 10px 12px;
  }
  .gt-region-col .gt-dd-item,
  .gt-dd-item {
    min-height: 40px;
    padding: 10px 12px;
  }
  .gt-region-title {
    padding: 4px 12px 6px;
  }
  .console-toolbar {
    align-items: center;
    gap: 8px;
  }
  .console-toolbar-actions {
    flex-shrink: 0;
  }
  .console-filter-form {
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .console-filter-form .select-compact {
    flex: 0 0 auto;
    min-width: 96px;
    max-width: 112px;
  }
  .console-search {
    flex: 1 1 auto;
    min-width: 0;
  }
  .console-search .input {
    min-width: 0;
    width: 100%;
    flex: 1;
  }
  .instance-table-scroll {
    scrollbar-width: auto;
  }
  .instance-table-scroll::-webkit-scrollbar {
    height: 8px;
  }
  .instance-table {
    min-width: 980px;
  }
  .table-footer {
    padding: 10px;
    gap: 8px;
  }
  .table-footer-right {
    width: 100%;
    justify-content: flex-start;
  }
  .drawer {
    width: min(100vw, 100%);
  }
  .modal.modal-lg {
    width: calc(100vw - 24px);
    max-width: none;
    margin: 12px;
  }
  .stop-mode-cards {
    grid-template-columns: 1fr;
  }
  .stop-billing-tag {
    margin-left: 0;
  }
  .toast-wrap {
    left: 12px;
    right: 12px;
    top: calc(var(--topbar-h) + 8px);
  }
}

@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; }
  .gt-user-meta { display: none; }
  .gt-user {
    border-left: 0;
    padding-left: 0;
  }
  .content,
  .content-console {
    padding: 10px 10px 18px;
  }
  .crumb {
    margin-bottom: 8px;
  }
  .console-title-main {
    flex-wrap: wrap;
  }
  .console-title-divider {
    display: none;
  }
  .console-scope-filters {
    gap: 2px;
    width: 100%;
  }
  .console-scope-filters .gt-dd-trigger {
    max-width: min(100%, 200px);
    padding: 0 8px;
  }
  .console-scope-filters .gt-region-trigger > span {
    max-width: 120px;
  }
  .gt-user-panel {
    min-width: min(160px, calc(100vw - 20px));
  }
  .console-region-static {
    padding: 0 6px;
  }
  .console-toolbar {
    margin-bottom: 8px;
    gap: 6px;
  }
  .console-filter-form {
    flex: 1 1 100%;
    gap: 6px;
  }
  .console-filter-form .select-compact {
    min-width: 88px;
    max-width: 104px;
    padding-left: 8px;
    padding-right: 24px;
  }
  .console-search .input {
    padding-left: 10px;
    padding-right: 10px;
  }
  .page-btn {
    min-width: 32px;
    height: 32px;
  }
  .page-size .select-compact {
    height: 32px;
  }
  .empty {
    padding: 28px 16px;
  }
}

/* ========== Domain register ========== */
.domain-register-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.domain-register-hero {
  background:
    radial-gradient(1200px 280px at 10% -40%, rgba(0, 110, 255, 0.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 22px 18px;
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
}
.domain-register-hero-inner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.domain-register-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 650;
  color: #111;
}
.domain-register-desc {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  max-width: min(720px, 100%);
}
.domain-search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.domain-search-input-wrap {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
}
.domain-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #99a;
  pointer-events: none;
}
.domain-search-input {
  width: 100%;
  height: 40px;
  padding-left: 38px !important;
  font-size: 14px;
}
.domain-search-years {
  width: 96px;
  height: 40px;
  flex: 0 0 auto;
}
.domain-search-btn {
  height: 40px;
  min-width: 108px;
  padding: 0 18px;
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.domain-suffix-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
}
.domain-suffix-label {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 28px;
}
.domain-suffix-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.domain-suffix-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  color: #444;
  user-select: none;
}
.domain-suffix-chip:has(input:checked) {
  border-color: #9ec5ff;
  background: var(--brand-soft);
  color: var(--brand);
}
.domain-suffix-chip input { accent-color: var(--brand); }
.domain-suffix-more {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.domain-suffix-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #444;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.domain-suffix-more.open .domain-suffix-more-btn,
.domain-suffix-more-btn:hover {
  border-color: #9ec5ff;
  background: var(--brand-soft);
  color: var(--brand);
}
.domain-suffix-more-count {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}
.domain-suffix-more-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(420px, calc(100vw - 48px));
  max-height: min(360px, 60vh);
  background: #fff;
  border: 1px solid #e8e8e8;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  padding: 10px;
  overflow: hidden;
}
.domain-suffix-more.open .domain-suffix-more-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}
.domain-suffix-more-head {
  display: grid;
  gap: 8px;
}
.domain-suffix-more-search {
  height: 32px;
  width: 100%;
}
.domain-suffix-more-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.domain-suffix-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  overflow: auto;
  max-height: 260px;
  padding-right: 2px;
}
.domain-suffix-more-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  user-select: none;
}
.domain-suffix-more-item:hover {
  background: #f5f8fc;
}
.domain-suffix-more-item:has(input:checked) {
  background: var(--brand-soft);
  color: var(--brand);
}
.domain-suffix-more-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.domain-suffix-more-item input {
  accent-color: var(--brand);
  flex: 0 0 auto;
}
.domain-suffix-more-empty {
  padding: 18px 8px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}
@media (max-width: 520px) {
  .domain-suffix-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .domain-suffix-more-panel {
    left: auto;
    right: 0;
  }
}
.domain-register-tip {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.domain-register-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 320px);
  gap: 14px;
  align-items: start;
  width: 100%;
  min-width: 0;
}
.domain-results-card,
.domain-side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px;
  min-width: 0;
}
.domain-results-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  max-height: calc(100vh - 220px);
  overflow: hidden;
  width: 100%;
}
.domain-results-head,
.domain-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.domain-results-head {
  flex: 0 0 auto;
}
.domain-results-empty {
  flex: 1 1 auto;
  padding: 28px 12px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.7;
}
.domain-results-empty[hidden] {
  display: none;
}
.domain-results-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.domain-results-more[hidden] {
  display: none;
}
.domain-results-more .muted {
  font-size: 12px;
}
.domain-results-card .instance-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
}
.domain-results-card .instance-table-wrap[hidden] {
  display: none;
}
.domain-results-card .instance-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.domain-results-card .instance-table-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.domain-results-table {
  table-layout: fixed;
  width: 100%;
  min-width: 640px;
}
.domain-results-table th,
.domain-results-table td {
  vertical-align: middle;
}
.domain-results-table .domain-col-name { width: auto; }
.domain-results-table .domain-col-status { width: 16%; }
.domain-results-table .domain-col-price { width: 22%; }
.domain-results-table .domain-col-years { width: 12%; }
.domain-results-table .domain-col-action {
  width: 112px;
  min-width: 112px;
  white-space: nowrap;
  text-align: right;
  position: sticky;
  right: 0;
  z-index: 3;
  box-shadow: -8px 0 10px -8px rgba(0, 0, 0, 0.12);
  background: #fff;
}
.domain-results-table th.domain-col-action {
  text-align: right;
  z-index: 4;
  background: #fafafa;
}
.domain-results-table tbody tr:hover td.domain-col-action {
  background: #f7fbff;
}
.domain-results-table tbody tr.domain-row-querying td.domain-col-action {
  background: #f5f9ff;
}
.domain-results-table tbody tr.domain-row-error td.domain-col-action {
  background: #fff8f8;
}
.domain-buy-btn {
  min-width: 88px;
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.domain-results-table .domain-price {
  font-weight: 600;
  color: #111;
  font-size: 14px;
}
.domain-results-table .domain-price-muted { color: var(--text-tertiary); font-weight: 400; }
.domain-row {
  opacity: 0;
  transform: translateY(6px);
  animation: domainRowIn .28s var(--ease) forwards;
  animation-delay: calc(var(--row-i, 0) * 45ms);
}
/* 查询中/完成后会替换 animation，需显式保持可见，否则会回到 opacity:0 */
.domain-row.domain-row-querying,
.domain-row.domain-row-done,
.domain-row.domain-row-error {
  opacity: 1;
  transform: none;
}
.domain-row-querying {
  background: #f5f9ff;
}
.domain-row-done {
  animation: domainRowFlash .45s var(--ease);
}
.domain-row-error td {
  background: #fff8f8;
}
.domain-status-loading i {
  animation: domainPulse 1s ease-in-out infinite;
}
.domain-price-skeleton {
  display: inline-block;
  width: 72px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, #eef2f7 25%, #e4eaf2 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: domainShimmer 1.1s ease infinite;
}
@keyframes domainRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes domainRowFlash {
  0% { background: #eaf4ff; }
  100% { background: transparent; }
}
@keyframes domainPulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
@keyframes domainShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.domain-premium-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 2px;
  background: #fff4e8;
  color: var(--accent);
  font-size: 11px;
}
.domain-side-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  width: 100%;
}
.domain-side-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
}
.domain-side-list code {
  font-family: var(--mono);
  font-size: 11px;
  color: #555;
}
.domain-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.domain-order-name {
  font-size: 13px;
  font-weight: 600;
  color: #222;
  word-break: break-all;
}
.domain-order-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-tertiary);
  word-break: break-all;
}
.domain-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}
.domain-register-modal {
  max-width: 480px;
  width: calc(100% - 32px);
}
.domain-register-form {
  display: grid;
  gap: 16px;
}
.domain-reg-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: end;
  padding: 14px 16px;
  background: #f7f8fa;
  border: 1px solid #ebebeb;
}
.domain-reg-summary-main,
.domain-reg-summary-price {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.domain-reg-summary-price {
  text-align: right;
  justify-items: end;
}
.domain-reg-summary-label {
  font-size: 12px;
  color: #888;
  line-height: 1;
}
.domain-reg-domain {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  line-height: 1.35;
  word-break: break-all;
}
.domain-reg-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-height: 22px;
}
.domain-reg-price .domain-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent, #ff6a00);
  letter-spacing: -0.02em;
}
.domain-reg-fields {
  display: grid;
  gap: 14px;
}
.domain-reg-fields .select {
  width: 100%;
}
.domain-reg-req {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid #e8e8e8;
  background: #fff;
  color: #888;
  font-size: 11px;
  font-weight: 400;
  border-radius: 2px;
  vertical-align: 1px;
}
@media (max-width: 1100px) {
  .domain-register-body {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  }
}
@media (max-width: 900px) {
  .domain-register-body { grid-template-columns: 1fr; }
  .domain-search-bar { flex-wrap: wrap; }
  .domain-search-input-wrap { flex: 1 1 100%; }
  .domain-search-years { width: 100%; }
  .domain-search-btn { width: 100%; }
  .domain-suffix-row { flex-direction: column; gap: 6px; }
  .domain-register-hero { padding: 16px 14px 14px; }
  .domain-results-card { max-height: none; }
}
@media (max-width: 480px) {
  .domain-reg-summary {
    grid-template-columns: 1fr;
  }
  .domain-reg-summary-price {
    text-align: left;
    justify-items: start;
  }
  .domain-reg-price {
    justify-content: flex-start;
  }
}

/* ========== Dashboard ========== */
.dash { max-width: 100%; }
.dash-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.dash-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: #111;
  letter-spacing: -0.01em;
}
.dash-sub {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.dash-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.dash-kpi-grid-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dash-kpi {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  padding: 16px 18px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.dash-kpi:hover {
  border-color: #b3d4ff;
  background: #fafcff;
}
.dash-kpi-label {
  color: var(--text-tertiary);
  font-size: 12px;
}
.dash-kpi-value {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 650;
  color: #111;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dash-kpi-unit {
  margin-left: 2px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-tertiary);
}
.dash-kpi-meta {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 12px;
}
.dash-kpi-ok { color: var(--ok); }
.dash-kpi-warn { color: #d48806; font-weight: 500; }

.dash-panel {
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
.dash-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.dash-panel-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}
.dash-panel-desc {
  margin: 4px 0 0;
  color: var(--text-tertiary);
  font-size: 12px;
}
.dash-panel-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.dash-link {
  color: var(--brand);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.dash-link:hover { color: var(--brand-hover); }

.dash-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.dash-platform-card {
  padding: 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dash-platform-card:nth-child(2n) { border-right: 0; }
.dash-platform-grid-4 .dash-platform-card:nth-last-child(-n+2) { border-bottom: 0; }
.dash-platform-grid:not(.dash-platform-grid-4) .dash-platform-card:last-child { border-right: 0; border-bottom: 0; }
.dash-platform-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dash-platform-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dash-platform-mark {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.dash-platform-aliyun .dash-platform-mark { background: #ff6a00; }
.dash-platform-tencent .dash-platform-mark { background: #0052d9; }
.dash-platform-cdn .dash-platform-mark { background: #0f766e; }
.dash-platform-dns .dash-platform-mark { background: #1d4ed8; }
.dash-platform-mark.is-wide { font-size: 10px; letter-spacing: 0.02em; }
.dash-platform-mark.has-logo {
  background: #f5f5f5;
  border: 1px solid #eee;
  padding: 2px;
}
.dash-platform-mark.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.dash-platform-name {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}
.dash-platform-scope {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.dash-platform-products {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dash-platform-products a,
.dash-platform-products span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  font-size: 12px;
  color: var(--text);
}
.dash-platform-products a:hover {
  border-color: #b3d4ff;
  color: var(--brand);
  background: var(--brand-soft);
}
.dash-platform-products .is-disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.dash-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.dash-badge.is-ok {
  color: var(--ok);
  background: #f0faf0;
  border-color: #c6e6c6;
}
.dash-badge.is-warn {
  color: #d48806;
  background: #fffbe6;
  border-color: #ffe58f;
}
.dash-badge.is-danger {
  color: var(--danger);
  background: #fff1f0;
  border-color: #ffccc7;
}
.dash-badge.is-muted {
  color: var(--text-tertiary);
  background: #fafafa;
  border-color: var(--line);
}

.dash-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.dash-product-grid > .dash-panel { margin-bottom: 0; }
.dash-product .dash-metrics,
.dash-product .dash-stackbar,
.dash-product .dash-stackbar-legend,
.dash-product .dash-table-wrap,
.dash-product .dash-product-hint {
  margin-left: 16px;
  margin-right: 16px;
}
.dash-product .dash-metrics { margin-top: 14px; }
.dash-product .dash-stackbar-legend { margin-bottom: 16px; }
.dash-product .dash-table-wrap {
  margin-top: 0;
  margin-bottom: 16px;
}
.dash-product-hint {
  margin-top: -4px;
  margin-bottom: 16px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.dash-metric {
  padding: 10px 12px;
  background: var(--surface-muted);
  border: 1px solid #f0f0f0;
}
.dash-metric-label {
  font-size: 12px;
  color: var(--text-tertiary);
}
.dash-metric-value {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 650;
  color: #111;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dash-metric-value.is-ok { color: var(--ok); }
.dash-metric-value.is-warn { color: #d48806; }

.dash-stackbar {
  margin-top: 12px;
  display: flex;
  height: 8px;
  background: #f0f0f0;
  overflow: hidden;
}
.dash-stackbar > span { display: block; min-width: 0; height: 100%; }
.dash-stackbar .is-run,
.dash-stackbar-legend i.is-run { background: var(--ok); }
.dash-stackbar .is-stop,
.dash-stackbar-legend i.is-stop { background: #8c8c8c; }
.dash-stackbar .is-warn,
.dash-stackbar-legend i.is-warn { background: #faad14; }
.dash-stackbar .is-danger,
.dash-stackbar-legend i.is-danger { background: var(--danger); }
.dash-stackbar .is-other,
.dash-stackbar-legend i.is-other { background: #d9d9d9; }
.dash-stackbar-legend {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  color: var(--text-secondary);
  font-size: 12px;
}
.dash-stackbar-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  vertical-align: 1px;
}

.dash-table-wrap { overflow-x: auto; }
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dash-table th,
.dash-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  vertical-align: middle;
}
.dash-table th {
  color: var(--text-tertiary);
  font-weight: 500;
  background: #fafafa;
  border-bottom-color: var(--line);
}
.dash-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 12px;
}
.dash-table .muted { color: var(--text-tertiary); }
.dash-table tbody tr:last-child td { border-bottom: 0; }

.dash-plat-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  width: max-content;
  max-width: 100%;
  vertical-align: middle;
}
.dash-plat-tag.is-sm { height: 20px; padding: 0 6px; font-size: 11px; }
.dash-plat-aliyun {
  color: #d46b08;
  background: #fff7e6;
  border-color: #ffd591;
}
.dash-plat-tencent {
  color: #1d39c4;
  background: #f0f5ff;
  border-color: #adc6ff;
}
.dash-plat-cdn {
  color: #0f766e;
  background: #f0fdfa;
  border-color: #99f6e4;
}
.dash-plat-dns {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}
.dash-recent-name {
  color: #111;
  font-weight: 500;
  word-break: break-all;
}
.dash-recent-name:hover { color: var(--brand); }
a.dash-plat-tag:hover { filter: brightness(0.97); }

.dash-mini-bar {
  display: inline-block;
  width: 72px;
  height: 6px;
  background: #f0f0f0;
  vertical-align: middle;
  margin-right: 8px;
  overflow: hidden;
}
.dash-mini-bar > span {
  display: block;
  height: 100%;
  background: var(--brand);
}
.dash-mini-pct {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.dash-domain-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
  gap: 0;
}
.dash-domain-layout > div:first-child {
  padding: 14px 16px 16px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.dash-side {
  padding: 14px 16px 16px;
  background: #fcfcfc;
  min-width: 0;
}
.dash-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.dash-side-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #111;
}
.dash-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}
.dash-empty .dash-link { font-size: 12px; }
}
.dash-expire-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-expire-list li {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.dash-expire-list li:last-child { border-bottom: 0; }
.dash-expire-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.dash-expire-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  color: #111;
  line-height: 1.4;
  word-break: break-all;
}
.dash-expire-main .dash-plat-tag {
  margin-top: 1px;
}
.dash-expire-meta {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 0;
}
.dash-expire-meta > span {
  min-width: 0;
}
.dash-expire-meta .muted {
  flex-shrink: 0;
  white-space: nowrap;
}
.dash-expire-meta .is-warn {
  color: #d48806;
  font-weight: 500;
}

.dash-table td:first-child {
  white-space: nowrap;
  vertical-align: middle;
}
.dash-product .dash-table td:first-child {
  white-space: normal;
}

@media (max-width: 1100px) {
  .dash-kpi-grid,
  .dash-kpi-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-product-grid { grid-template-columns: 1fr; }
  .dash-domain-layout { grid-template-columns: 1fr; }
  .dash-domain-layout > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .dash-hero { flex-direction: column; }
  .dash-platform-grid { grid-template-columns: 1fr; }
  .dash-platform-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .dash-platform-card:nth-child(2n) { border-right: 0; }
  .dash-platform-grid-4 .dash-platform-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .dash-platform-card:last-child { border-bottom: 0; }
  .dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-expire-main {
    align-items: flex-start;
  }
  .dash-mini-bar {
    width: 48px;
    margin-right: 6px;
  }
}
@media (max-width: 480px) {
  .dash-kpi-grid { grid-template-columns: 1fr; }
  .dash-side {
    padding-left: 12px;
    padding-right: 12px;
  }
  .dash-expire-main {
    gap: 10px;
  }
}

/* ========== Cloud Data Transfer (CDT) ========== */
.cdt-page {
  min-width: 0;
}
.cdt-page-header {
  margin-bottom: 12px;
}
.cdt-page-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cdt-page-title-row h2 {
  margin: 0;
}
.cdt-platform-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid #cfe3ff;
  line-height: 1;
}

.cdt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.cdt-toolbar-left,
.cdt-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.cdt-toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--line);
  flex-shrink: 0;
}
.cdt-seg {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.cdt-seg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-right: 1px solid var(--line-strong);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.cdt-seg-item:last-child {
  border-right: 0;
}
.cdt-seg-item:hover {
  color: var(--brand);
  background: var(--brand-soft);
}
.cdt-seg-item.is-active {
  color: #fff;
  background: var(--brand);
}
.cdt-seg-item.is-active:hover {
  color: #fff;
  background: var(--brand-hover);
}

.cdt-period-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.cdt-period-chip-label {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.cdt-period-chip-value {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  letter-spacing: 0.01em;
}

.cdt-period-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cdt-field-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cdt-period-select {
  min-width: 148px;
  height: 30px;
  padding: 0 10px;
}

.cdt-quick-group {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.cdt-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-secondary);
  border-right: 1px solid var(--line-strong);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.cdt-quick-btn:last-child {
  border-right: 0;
}
.cdt-quick-btn:hover {
  color: var(--brand);
  background: var(--brand-soft);
}
.cdt-quick-btn.is-active {
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 600;
}

.cdt-layout {
  display: block;
  min-width: 0;
}
.cdt-main {
  min-width: 0;
}

.cdt-date-picker {
  position: relative;
  min-width: 0;
}
.cdt-date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 4px 10px 4px 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.cdt-date-trigger:hover {
  border-color: #9ec5ff;
  background: #fafcff;
}
.cdt-date-picker.is-open .cdt-date-trigger {
  border-color: var(--brand);
  background: #f5f9ff;
  box-shadow: 0 0 0 2px rgba(0, 110, 255, 0.12);
}
.cdt-date-trigger-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.cdt-date-trigger-caret {
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform 0.15s var(--ease), color 0.15s var(--ease);
}
.cdt-date-picker.is-open .cdt-date-trigger-caret {
  transform: rotate(180deg);
  color: var(--brand);
}

.cdt-date-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(312px, calc(100vw - 32px));
  filter: drop-shadow(0 10px 28px rgba(15, 23, 42, 0.12));
}
.cdt-date-panel[hidden] {
  display: none !important;
}
.cdt-date-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}

.cdt-calendar-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 14px 14px 12px;
}
.cdt-calendar-head {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cdt-calendar-title {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #111;
}
.cdt-cal-nav {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  border: 1px solid transparent;
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}
a.cdt-cal-nav:hover {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: #cfe3ff;
}
.cdt-cal-nav.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.cdt-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.cdt-calendar-weekdays span {
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 4px 0;
}
.cdt-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cdt-day {
  display: grid;
  place-items: center;
  height: 34px;
  font-size: 12px;
  color: var(--text);
  border: 1px solid transparent;
  transition: color 0.12s var(--ease), background 0.12s var(--ease), border-color 0.12s var(--ease);
}
a.cdt-day:hover {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: #cfe3ff;
}
.cdt-day.is-out {
  color: #cfcfcf;
}
.cdt-day.is-today:not(.is-selected) {
  color: var(--brand);
  font-weight: 600;
  border-color: #9ec5ff;
}
.cdt-day.is-selected {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}
a.cdt-day.is-selected:hover {
  color: #fff;
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.cdt-day.is-disabled {
  color: #e0e0e0;
  cursor: not-allowed;
}
.cdt-calendar-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.cdt-calendar-foot-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.cdt-cal-jump {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  color: var(--text-secondary);
  border: 1px solid var(--line);
  background: #fff;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.cdt-cal-jump:hover {
  color: var(--brand);
  border-color: #cfe3ff;
  background: var(--brand-soft);
}
.cdt-cal-jump.is-active {
  color: var(--brand);
  border-color: #9ec5ff;
  background: var(--brand-soft);
  font-weight: 600;
}

.cdt-stat-grid {
  margin-bottom: 16px;
}
.cdt-stat-grid .cdt-stat-value {
  font-size: 22px;
  letter-spacing: -0.01em;
}
.cdt-panel {
  margin-bottom: 16px;
}
.cdt-panel .panel-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.cdt-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
}
.cdt-empty p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
}
.cdt-empty-error p {
  color: var(--danger);
}
.cdt-table-scroll {
  overflow: auto;
  max-height: 520px;
}
.cdt-items-mobile {
  display: none;
}
.cdt-item-card {
  border-bottom: 1px solid #f0f0f0;
}
.cdt-item-card:last-child {
  border-bottom: 0;
}
.cdt-item-summary {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.cdt-item-summary:hover {
  background: #fafcff;
}
.cdt-item-summary-main {
  min-width: 0;
  flex: 1;
}
.cdt-item-region {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  line-height: 1.4;
}
.cdt-item-preview {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdt-item-summary-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  max-width: 42%;
}
.cdt-item-usage {
  font-size: 13px;
  color: #111;
  line-height: 1.3;
}
.cdt-item-cost {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.cdt-item-caret {
  display: inline-flex;
  margin-top: 4px;
  color: var(--text-tertiary);
  transition: transform 0.18s var(--ease);
}
.cdt-item-card.is-open .cdt-item-caret {
  transform: rotate(180deg);
  color: var(--brand);
}
.cdt-item-detail {
  padding: 0 14px 12px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}
.cdt-item-detail[hidden] {
  display: none;
}
.cdt-item-kv {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cdt-item-kv:last-child {
  border-bottom: 0;
}
.cdt-item-k {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.cdt-item-v {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.cdt-region-name {
  font-weight: 500;
  color: #111;
}
.cdt-table td {
  vertical-align: top;
}
.cdt-panel-body {
  position: relative;
  min-height: 160px;
}
.cdt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 32px 20px;
  text-align: center;
}
.cdt-loading[hidden] {
  display: none;
}
.cdt-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid #e8eef7;
  border-top-color: var(--brand);
  animation: cdtSpin 0.75s linear infinite;
}
.cdt-loading-title {
  font-size: 13px;
  font-weight: 600;
  color: #222;
}
.cdt-loading-text {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.cdt-skel {
  display: inline-block;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: cdtShimmer 1.2s ease infinite;
  vertical-align: middle;
}
.cdt-skel-lg {
  width: 96px;
  height: 22px;
}
.cdt-skel-sm {
  width: 36px;
  height: 22px;
}
@keyframes cdtSpin {
  to { transform: rotate(360deg); }
}
@keyframes cdtShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (max-width: 900px) {
  .cdt-date-panel {
    left: 0;
    right: auto;
  }
}
@media (max-width: 720px) {
  .cdt-toolbar {
    align-items: stretch;
  }
  .cdt-toolbar-left,
  .cdt-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }
  .cdt-toolbar-divider {
    display: none;
  }
  .cdt-period-chip,
  .cdt-date-trigger-meta {
    flex-direction: column;
    gap: 2px;
  }
  .cdt-date-picker {
    width: 100%;
  }
  .cdt-date-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .cdt-date-panel {
    left: 0;
    right: 0;
    width: auto;
  }
  .cdt-date-panel::before {
    left: 28px;
  }
  .cdt-quick-group-desktop {
    display: none;
  }
  .cdt-calendar-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .cdt-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cdt-items-desktop {
    display: none;
  }
  .cdt-items-mobile {
    display: block;
    max-height: min(70vh, 560px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cdt-table td {
    max-width: 140px;
    word-break: break-word;
  }
}

/* ========== SWAS create ========== */
.swas-create-page {
  display: grid;
  gap: 16px;
}
.swas-create-head {
  display: grid;
  gap: 0;
}
.swas-create-panel {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid #e6ebf2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #fff 100%),
    linear-gradient(135deg, #f7fafc 0%, #eef4fb 100%);
  background-clip: padding-box;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow: visible;
}
.swas-create-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #5b8def 0%, #2f6fed 100%);
}
.swas-create-page-tencent .swas-create-panel::before {
  background: linear-gradient(180deg, #4d8dff 0%, #0052d9 100%);
}
.swas-create-panel-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.swas-create-panel-copy {
  min-width: 0;
  flex: 1 1 280px;
}
.swas-create-panel-vendor {
  flex: 0 0 auto;
  padding-top: 2px;
  padding-right: 4px;
  padding-bottom: 10px;
}
.swas-create-head .swas-create-title {
  margin: 0 0 6px;
}
.swas-create-head .swas-create-desc {
  margin: 0;
  max-width: 560px;
}
.swas-create-panel .swas-create-tip {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e8eef5;
  background: rgba(255, 255, 255, 0.8);
}

/* Vendor stack: overlapping cards, click back card to switch */
.swas-vendor-stack {
  position: relative;
  width: 200px;
  height: 44px;
  z-index: 40;
}
.swas-vendor-stack.has-stack {
  width: 228px;
  height: 64px;
}
.swas-vendor-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid #dde3ec;
  background: #fff;
  color: #344054;
  overflow: visible;
  transition: left .18s ease, top .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .15s ease, background .15s ease;
}
.swas-vendor-card.is-front {
  z-index: 2;
  left: 0;
  top: 0;
  border-color: #2f6fed;
  background: #f5f8ff;
  box-shadow: 0 4px 12px rgba(47, 111, 237, 0.12);
}
.swas-create-page-tencent .swas-vendor-card.is-front {
  border-color: #0052d9;
  background: #f0f6ff;
  box-shadow: 0 4px 12px rgba(0, 82, 217, 0.12);
}
/* 非交互前景不拦截点击，才能点到背后的腾讯云 */
.swas-vendor-stack.has-stack .swas-vendor-card.is-front:not(.is-interactive) {
  pointer-events: none;
}
.swas-vendor-card.is-back {
  z-index: 1;
  left: 22px;
  top: 16px;
  opacity: 0.82;
  background: #f8fafc;
  border-color: #d0d5dd;
  box-shadow: none;
  pointer-events: auto;
}
.swas-vendor-card.is-back:hover,
.swas-vendor-card.is-back:focus-within {
  opacity: 1;
  z-index: 4;
  border-color: #b9c5d6;
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.1);
}
.swas-vendor-card:has(.swas-vendor-menu.open) {
  z-index: 8;
  opacity: 1;
  pointer-events: auto;
}
.swas-vendor-card .swas-vendor-menu {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.swas-vendor-menu-panel {
  min-width: 240px;
  padding: 6px 0;
  z-index: 400;
}
.swas-vendor-menu.open .swas-vendor-menu-panel {
  display: block;
}
.swas-vendor-card-face {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.swas-vendor-card.is-front:not(.is-interactive) > .swas-vendor-card-face {
  cursor: default;
}
.swas-vendor-card-logo {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}
.swas-vendor-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.swas-vendor-card-logo.is-fallback {
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.swas-vendor-card-logo.is-aliyun {
  background: linear-gradient(145deg, #ff8a1f, #ff6a00);
}
.swas-vendor-card-logo.is-tencent {
  background: linear-gradient(145deg, #3d7eff, #0052d9);
}
.swas-vendor-card-body {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.swas-vendor-card-name {
  white-space: nowrap;
}
.swas-vendor-card-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 8px;
  background: #d0d5dd;
  flex-shrink: 0;
}
.swas-vendor-card.is-front .swas-vendor-card-sep {
  background: #b8c4d6;
}
.swas-vendor-card-account {
  font-size: 12px;
  font-weight: 500;
  color: #667085;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swas-vendor-card-caret {
  flex-shrink: 0;
  color: #98a2b3;
  transition: transform .15s ease;
}
.swas-vendor-menu.open .swas-vendor-card-caret {
  transform: rotate(180deg);
}
.swas-vendor-menu-label {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #98a2b3;
}
.swas-vendor-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  color: #333;
  font-size: 13px;
  cursor: pointer;
}
.swas-vendor-menu-item:hover:not(.disabled):not(:disabled) {
  background: #f5f5f5;
  color: var(--brand);
}
.swas-vendor-menu-item.active {
  background: #e8f3ff;
  color: var(--brand);
  font-weight: 600;
}
.swas-vendor-menu-item.disabled,
.swas-vendor-menu-item:disabled {
  color: #bbb;
  cursor: not-allowed;
}
.swas-vendor-menu-item-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.swas-vendor-menu-item-main strong {
  font-size: 13px;
  font-weight: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swas-vendor-menu-item-main em {
  font-style: normal;
  font-size: 11px;
  color: #999;
  font-weight: 400;
}
.swas-vendor-menu-item-status {
  flex-shrink: 0;
  font-size: 11px;
  color: #999;
  font-weight: 400;
}
.swas-vendor-menu-item-status.is-ready {
  color: #027a48;
}

.swas-create-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.swas-create-summary-vendor {
  font-size: 11px;
  font-weight: 600;
  color: #2f6fed;
  background: #eff4ff;
  padding: 2px 8px;
}
.swas-create-summary-tencent .swas-create-summary-vendor {
  color: #0052d9;
  background: #e8f3ff;
}
.swas-create-page-tencent .swas-image-tab.active {
  color: #0052d9;
}
.swas-create-page-tencent .swas-image-tab.active::after {
  background: #0052d9;
}
.swas-create-page-tencent .swas-image-family-card.active {
  border-color: #0052d9;
  background: #f0f6ff;
  box-shadow: inset 0 0 0 1px #0052d9;
}
.swas-create-page-tencent .swas-plan-card.active .plan-main {
  box-shadow: inset 3px 0 0 #0052d9;
  background: #f0f6ff;
}
.swas-btn-tencent.btn-primary,
.btn.swas-btn-tencent.btn-primary {
  background: #0052d9;
  border-color: #0052d9;
}
.swas-create-hero {
  background: linear-gradient(135deg, #f7fafc 0%, #eef5fb 55%, #f8fafc 100%);
  border: 1px solid #e8eef5;
  padding: 20px 22px;
}
.swas-create-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #1f2a37;
}
.swas-create-desc {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
  max-width: 640px;
}
.swas-create-tip {
  margin-top: 0;
  font-size: 12px;
  color: #667085;
  background: #fff;
  border: 1px solid #e8eef5;
  padding: 10px 12px;
}
.swas-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.swas-create-main {
  display: grid;
  gap: 14px;
}
.swas-create-card {
  background: #fff;
  border: 1px solid #eceff3;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.swas-region-section {
  padding: 18px 22px 20px;
  gap: 16px;
  overflow: visible;
}
.swas-region-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.swas-region-head strong {
  font-size: 15px;
  font-weight: 650;
  color: #1f2a37;
}
.swas-region-head-meta {
  font-size: 12px;
  color: #98a2b3;
}
.swas-region-stage {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.swas-region-stage-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.swas-region-stage-label > span {
  font-size: 13px;
  font-weight: 650;
  color: #344054;
}
.swas-region-stage-label > em {
  font-style: normal;
  font-size: 12px;
  color: #98a2b3;
}
.swas-region-cards {
  grid-template-columns: repeat(var(--swas-region-cols, 4), minmax(0, 1fr));
}
.swas-region-card {
  position: relative;
  min-height: 72px;
  padding: 14px 14px 12px;
}
.swas-region-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: var(--brand, #006eff);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 0 0 0 6px;
}
.swas-region-card.is-active {
  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
}
.swas-region-more.is-active .ecs-region-more-trigger {
  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
}
.swas-region-tips {
  display: grid;
  gap: 8px;
}
.swas-region-tip-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.55;
}
.swas-create-page .ecs-form-row {
  grid-template-columns: 108px minmax(0, 1fr);
}
@media (max-width: 960px) {
  .swas-region-cards {
    grid-template-columns: 1fr 1fr;
  }
  .swas-create-page .ecs-form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .swas-create-page .ecs-form-label {
    padding-top: 0;
  }
}
@media (max-width: 640px) {
  .swas-region-cards {
    grid-template-columns: 1fr;
  }
}
.swas-create-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.swas-create-card-head strong {
  font-size: 14px;
  color: #1f2a37;
}
.swas-create-empty {
  padding: 18px 12px;
  text-align: center;
  color: #98a2b3;
  font-size: 13px;
  background: #fafbfc;
  border: 1px dashed #e4e7ec;
}
.swas-catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.swas-plan-filters,
.swas-image-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.swas-plan-filters-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.swas-plan-filters.is-collapsed .swas-plan-filters-list .chip[data-extra="1"]:not(.active) {
  display: none;
}
.swas-plan-filters-toggle {
  flex-shrink: 0;
  color: #667085;
  border-style: dashed;
  order: 99;
}
.swas-plan-filters-toggle:hover,
.swas-plan-filters-toggle.active {
  border-color: #98b7f0;
  color: #2f6fed;
  background: #f8faff;
}
.swas-catalog-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.swas-os-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid #e4e7ec;
  background: #f4f6f8;
}
.swas-os-seg .chip {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #667085;
  padding: 4px 10px;
  min-width: 44px;
  justify-content: center;
}
.swas-os-seg .chip:hover {
  color: #1f2a37;
  border-color: transparent;
}
.swas-os-seg .chip.active {
  background: #fff;
  color: #2f6fed;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}
.swas-catalog-search {
  width: 168px;
  margin-left: 0;
  flex-shrink: 0;
}
.chip {
  border: 1px solid #e4e7ec;
  background: #fff;
  color: #475467;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}
.chip:hover {
  border-color: #c7d2e0;
  color: #1f2a37;
}
.chip.active {
  border-color: #2f6fed;
  background: #eff4ff;
  color: #2f6fed;
}
.swas-plan-scroll,
.swas-image-scroll {
  border: 1px solid #eef1f5;
  background: #fafbfc;
  max-height: 280px;
  overflow: auto;
}
.swas-plan-table-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 72px 88px;
  gap: 8px;
  padding: 7px 12px;
  font-size: 11px;
  color: #98a2b3;
  background: #f3f5f8;
  border-bottom: 1px solid #e8ecf1;
}
.swas-plan-list {
  display: grid;
}
.swas-plan-card {
  border-bottom: 1px solid #eef1f5;
  background: #fff;
}
.swas-plan-card:last-child {
  border-bottom: 0;
}
.swas-plan-card .plan-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 72px 88px;
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
  color: inherit;
  font: inherit;
}
.swas-plan-card .plan-main:hover {
  background: #f5f8ff;
}
.swas-plan-card.active .plan-main {
  background: #eff4ff;
  box-shadow: inset 3px 0 0 #2f6fed;
}
.swas-plan-card .plan-spec {
  font-size: 12px;
  color: #344054;
  line-height: 1.35;
  min-width: 0;
}
.swas-plan-card .plan-spec strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1f2a37;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swas-plan-card .plan-spec-id {
  display: block;
  color: #98a2b3;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swas-plan-card .plan-os {
  font-size: 11px;
  font-weight: 560;
  white-space: nowrap;
}
.swas-plan-card .plan-os[data-os="linux"] {
  color: #175cd3;
}
.swas-plan-card .plan-os[data-os="windows"] {
  color: #6941c6;
}
.swas-plan-card .plan-os[data-os="both"] {
  color: #667085;
}
.swas-plan-card .plan-type {
  font-size: 11px;
  color: #667085;
}
.swas-plan-card .plan-price {
  font-size: 13px;
  font-weight: 650;
  color: #c2410c;
  text-align: right;
  white-space: nowrap;
}
.swas-plan-card .plan-caret,
.swas-plan-card .plan-detail {
  display: none;
}
.swas-image-list {
  display: grid;
}
.swas-image-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
}
.swas-image-item:last-child {
  border-bottom: 0;
}
.swas-image-item:hover {
  background: #f5f8ff;
}
.swas-image-item.active {
  background: #eff4ff;
  box-shadow: inset 3px 0 0 #2f6fed;
}
.swas-image-item .img-name {
  font-size: 12px;
  font-weight: 560;
  color: #1f2a37;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.swas-image-item .img-meta {
  font-size: 11px;
  color: #98a2b3;
  white-space: nowrap;
}

/* Image picker (family cards + version) */
.swas-image-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #eef1f5;
  margin-top: -2px;
}
.swas-image-tab {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0 0 10px;
  font-size: 13px;
  color: #667085;
  cursor: pointer;
  line-height: 1.2;
}
.swas-image-tab:hover {
  color: #1f2a37;
}
.swas-image-tab.active {
  color: #2f6fed;
  font-weight: 600;
}
.swas-image-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #2f6fed;
}
.swas-image-picker {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}
.swas-image-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.swas-image-family-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 96px;
  padding: 14px 10px 12px;
  border: 1px solid #e4e7ec;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.swas-image-family-card:hover {
  border-color: #98b7f0;
}
.swas-image-family-card.active {
  border-color: #2f6fed;
  background: #f5f8ff;
  box-shadow: inset 0 0 0 1px #2f6fed;
}
.swas-image-family-card .family-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  overflow: hidden;
  flex-shrink: 0;
}
.swas-image-family-card .family-icon-svg {
  background: transparent;
  color: inherit;
  border-radius: 0;
}
.swas-image-family-card .family-icon-svg img {
  width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
}
.swas-image-family-card .family-icon[data-icon="aliyun"]:not(.family-icon-svg) { background: linear-gradient(135deg, #ff6a00, #ff8f1f); }
.swas-image-family-card .family-icon[data-icon="anolis"]:not(.family-icon-svg) { background: linear-gradient(135deg, #16a34a, #4ade80); }
.swas-image-family-card .family-icon[data-icon="opencloudos"]:not(.family-icon-svg) { background: linear-gradient(135deg, #0b5fff, #3d8bfd); }
.swas-image-family-card .family-icon[data-icon="ubuntu"]:not(.family-icon-svg) { background: linear-gradient(135deg, #e95420, #f5a26f); }
.swas-image-family-card .family-icon[data-icon="debian"]:not(.family-icon-svg) { background: linear-gradient(135deg, #a80030, #d70a53); }
.swas-image-family-card .family-icon[data-icon="centos"]:not(.family-icon-svg),
.swas-image-family-card .family-icon[data-icon="centos_stream"]:not(.family-icon-svg) { background: linear-gradient(135deg, #932279, #c44d9b); }
.swas-image-family-card .family-icon[data-icon="rocky"]:not(.family-icon-svg) { background: linear-gradient(135deg, #10b981, #34d399); }
.swas-image-family-card .family-icon[data-icon="alma"]:not(.family-icon-svg) { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.swas-image-family-card .family-icon[data-icon="suse"]:not(.family-icon-svg) { background: linear-gradient(135deg, #73ba25, #9fce54); }
.swas-image-family-card .family-icon[data-icon="fedora"]:not(.family-icon-svg) { background: linear-gradient(135deg, #294172, #3c6eb4); }
.swas-image-family-card .family-icon[data-icon="freebsd"]:not(.family-icon-svg) { background: linear-gradient(135deg, #ab2b28, #d94f4c); }
.swas-image-family-card .family-icon[data-icon="windows"]:not(.family-icon-svg) { background: linear-gradient(135deg, #0078d4, #2b88d8); }
.swas-image-family-card .family-icon[data-icon="linux"]:not(.family-icon-svg) { background: linear-gradient(135deg, #475467, #667085); }
.swas-image-family-card .family-icon[data-icon="app"]:not(.family-icon-svg) { background: linear-gradient(135deg, #2f6fed, #5b8def); }
.swas-image-family-card .family-icon[data-icon="custom"]:not(.family-icon-svg) { background: linear-gradient(135deg, #6941c6, #9e77ed); }
.swas-image-family-card .family-icon[data-icon="other"]:not(.family-icon-svg) { background: linear-gradient(135deg, #98a2b3, #c0c6d0); }
.swas-image-family-card .family-name {
  font-size: 12px;
  font-weight: 560;
  color: #344054;
  line-height: 1.35;
  word-break: break-word;
}
.swas-image-family-card.is-more {
  border-style: dashed;
  border-color: #d0d5dd;
  background: #fafbfc;
  color: #667085;
}
.swas-image-family-card.is-more:hover {
  border-color: #98b7f0;
  background: #f5f8ff;
  color: #2f6fed;
}
.swas-image-family-card.is-more .family-more-visual {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.swas-image-family-card.is-more .family-more-layers {
  color: #98a2b3;
  transition: color .15s ease;
}
.swas-image-family-card.is-more:hover .family-more-layers {
  color: #5b8def;
}
.swas-image-family-card.is-more .family-more-chevron {
  position: absolute;
  right: -1px;
  bottom: 1px;
  width: 12px;
  height: 12px;
  color: #667085;
  background: #fafbfc;
  border-radius: 50%;
  transition: transform .18s ease, color .15s ease, background .15s ease;
}
.swas-image-family-card.is-more:hover .family-more-chevron {
  color: #2f6fed;
  background: #f5f8ff;
}
.swas-image-family-card.is-more.is-expanded .family-more-chevron {
  transform: rotate(180deg);
}
.swas-image-family-card.is-more .family-name {
  color: inherit;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
}
.swas-image-version-wrap {
  display: grid;
  gap: 8px;
  max-width: 360px;
}
.swas-image-version-wrap label {
  font-size: 12px;
  font-weight: 500;
  color: #344054;
}
.swas-image-section .swas-create-card-head {
  margin-bottom: 12px;
}
.swas-image-section .swas-create-empty {
  margin-top: 12px;
}
.swas-create-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.swas-create-check {
  grid-column: 1 / -1;
  align-content: end;
}
.check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #344054;
  cursor: pointer;
}
.swas-create-side {
  position: sticky;
  top: 16px;
}
.swas-create-summary {
  background: #fff;
  border: 1px solid #eceff3;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.swas-create-summary-head strong {
  font-size: 14px;
}
.swas-create-summary-list {
  margin: 0;
  display: grid;
  gap: 8px;
}
.swas-create-summary-list > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  font-size: 12px;
}
.swas-create-summary-list dt {
  margin: 0;
  color: #98a2b3;
}
.swas-create-summary-list dd {
  margin: 0;
  color: #344054;
  word-break: break-word;
}
.swas-create-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid #f0f2f5;
}
.swas-create-price strong {
  font-size: 22px;
  color: #c2410c;
  font-weight: 700;
}
.swas-create-price #sum-price-origin {
  text-decoration: line-through;
  font-size: 12px;
}
.swas-create-actions {
  display: grid;
  gap: 8px;
}
.swas-create-notes {
  margin: 0;
  padding-left: 16px;
  color: #98a2b3;
  font-size: 11px;
  line-height: 1.55;
  display: grid;
  gap: 4px;
}
@media (max-width: 960px) {
  .swas-create-layout {
    grid-template-columns: 1fr;
  }
  .swas-create-side {
    position: static;
  }
  .swas-create-fields {
    grid-template-columns: 1fr;
  }
  .swas-create-panel {
    padding: 16px;
  }
  .swas-create-panel-vendor {
    width: 100%;
  }
  .swas-vendor-stack,
  .swas-vendor-stack.has-stack {
    width: 228px;
  }
  .swas-catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .swas-catalog-tools {
    margin-left: 0;
    width: 100%;
  }
  .swas-catalog-search {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .swas-image-family-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
  }
  .swas-image-family-card {
    min-height: 88px;
    padding: 12px 8px 10px;
  }
  .swas-image-version-wrap {
    max-width: none;
  }
  .swas-plan-table-head {
    display: none;
  }
  .swas-plan-scroll {
    max-height: min(52vh, 420px);
    border-radius: 0;
  }
  .swas-plan-card .plan-main {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px 10px;
    padding: 12px;
  }
  .swas-plan-card .plan-spec strong {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .swas-plan-card .plan-os,
  .swas-plan-card .plan-type,
  .swas-plan-card .plan-spec-id {
    display: none;
  }
  .swas-plan-card .plan-price {
    font-size: 14px;
  }
  .swas-plan-card .plan-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #98a2b3;
    transition: transform .18s ease, color .18s ease;
  }
  .swas-plan-card.is-expanded .plan-caret {
    transform: rotate(180deg);
    color: #2f6fed;
  }
  .swas-plan-card.active .plan-main {
    box-shadow: inset 3px 0 0 #2f6fed;
  }
  .swas-plan-card .plan-detail {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 0 12px 12px 15px;
    background: #f8faff;
    border-top: 1px solid #e8eef8;
  }
  .swas-plan-card.is-expanded .plan-detail {
    display: grid;
  }
  .swas-plan-card .plan-detail-row {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .swas-plan-card .plan-detail-row span {
    font-size: 11px;
    color: #98a2b3;
  }
  .swas-plan-card .plan-detail-row strong {
    font-size: 12px;
    font-weight: 560;
    color: #344054;
    word-break: break-all;
  }
  .swas-plan-card .plan-detail-row:last-child {
    grid-column: 1 / -1;
  }
}

/* —— ECS 创建：规格表 / 镜像 —— */
/* 规格区固定高度：表头与底部分页钉住，仅列表滚动 */
.ecs-create-page .ecs-type-scroll {
  display: flex;
  flex-direction: column;
  max-height: 420px;
  border-radius: 8px;
  overflow: hidden;
}
.ecs-create-page .ecs-type-scroll .ecs-type-table-head {
  flex: 0 0 auto;
  position: relative;
  top: auto;
}
.ecs-create-page .ecs-type-scroll .swas-plan-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.ecs-create-page .ecs-type-scroll .ecs-type-pager {
  flex: 0 0 auto;
}

/* ECS create basics: Aliyun-style upper form */
.ecs-basics-card {
  padding: 20px 22px 18px;
  overflow: visible;
}
.ecs-create-page .swas-create-main,
.ecs-create-page .swas-create-card {
  min-width: 0;
  max-width: 100%;
}
.ecs-form-rows {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.ecs-form-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
}
.ecs-form-label {
  padding-top: 10px;
}
.ecs-form-label-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
  line-height: 1.4;
}
.ecs-form-control {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.ecs-charge-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ecs-charge-card {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  text-align: left;
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid #dde3ec;
  background: #fff;
  color: #344054;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ecs-charge-card strong {
  font-size: 14px;
  font-weight: 650;
  color: #1f2a37;
  line-height: 1.3;
}
.ecs-charge-card > span:not(.ecs-charge-badge) {
  font-size: 12px;
  color: #98a2b3;
  line-height: 1.45;
}
.ecs-charge-card:hover:not(:disabled):not(.is-disabled) {
  border-color: #98b7f0;
  background: #f8fbff;
}
.ecs-charge-card.is-active {
  border-color: var(--brand, #006eff);
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px var(--brand, #006eff);
}
.ecs-charge-card.is-active strong {
  color: var(--brand, #006eff);
}
.ecs-charge-card.is-disabled,
.ecs-charge-card:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: #fafbfc;
}
.ecs-charge-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 0 0 0 6px;
  background: var(--accent, #ff6a00);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.ecs-region-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
}
.ecs-region-card {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: center;
  text-align: left;
  min-width: 0;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid #dde3ec;
  background: #fff;
  color: #344054;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ecs-region-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.ecs-region-card-top strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  color: #1f2a37;
  line-height: 1.3;
}
.ecs-region-card-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #98a2b3;
  line-height: 1.35;
  font-family: var(--mono);
}
.ecs-region-card-mark {
  flex: 0 0 auto;
  display: inline-flex;
  color: #98a2b3;
}
.ecs-region-card:hover:not(:disabled) {
  border-color: #98b7f0;
  background: #f8fbff;
}
.ecs-region-card.is-active {
  border-color: var(--brand, #006eff);
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px var(--brand, #006eff);
}
.ecs-region-card.is-active .ecs-region-card-top strong,
.ecs-region-card.is-active .ecs-region-card-mark {
  color: var(--brand, #006eff);
}
.ecs-region-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ecs-region-more {
  position: relative;
  min-width: 0;
}
.ecs-region-more.is-active .ecs-region-more-trigger {
  border-color: var(--brand, #006eff);
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px var(--brand, #006eff);
}
.ecs-region-more.is-active .ecs-region-more-trigger .ecs-region-card-top strong,
.ecs-region-more.is-active .ecs-region-more-caret {
  color: var(--brand, #006eff);
}
.ecs-region-more.is-open .ecs-region-more-trigger {
  border-color: var(--brand, #006eff);
  background: #f8fbff;
}
.ecs-region-more.is-open .ecs-region-more-caret {
  transform: rotate(180deg);
  color: var(--brand, #006eff);
}
.ecs-region-more-trigger {
  width: 100%;
}
.ecs-region-more-caret {
  flex: 0 0 auto;
  display: inline-flex;
  color: #98a2b3;
  transition: transform .18s ease, color .15s ease;
}
.ecs-region-more-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: auto;
  right: 0;
  z-index: 40;
  min-width: 100%;
  width: max(100%, 300px);
  max-width: min(380px, calc(100vw - 48px));
  border: 1px solid #d7e3f4;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 35, 70, 0.12), 0 2px 6px rgba(15, 35, 70, 0.06);
  overflow: hidden;
}
.ecs-region-more-head {
  padding: 10px;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.ecs-region-more-search {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #d9e2ef;
  background: #fff;
}
.ecs-region-more-search:focus {
  outline: none;
  border-color: var(--brand, #006eff);
  box-shadow: 0 0 0 3px rgba(0, 110, 255, 0.12);
}
.ecs-region-more-list {
  max-height: 260px;
  overflow: auto;
  padding: 6px;
}
.ecs-region-more-empty {
  padding: 18px 12px;
  text-align: center;
  color: #98a2b3;
  font-size: 12px;
}
.ecs-region-more-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.ecs-region-more-option:hover:not(:disabled) {
  background: #f5f9ff;
}
.ecs-region-more-option.is-selected {
  background: #eef5ff;
}
.ecs-region-more-option-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ecs-region-more-option-main strong {
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecs-region-more-option-main em {
  font-style: normal;
  font-size: 11px;
  color: #98a2b3;
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecs-region-more-option.is-selected .ecs-region-more-option-main strong {
  color: var(--brand, #006eff);
}
.ecs-region-more-check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: transparent;
}
.ecs-region-more-option.is-selected .ecs-region-more-check {
  color: var(--brand, #006eff);
}
.ecs-network-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.ecs-network-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.ecs-network-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.ecs-network-select-row .select {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecs-basics-card,
.ecs-form-control,
.ecs-form-rows,
.ecs-form-row {
  min-width: 0;
  max-width: 100%;
}
.ecs-icon-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dde3ec;
  background: #fff;
  color: var(--brand, #006eff);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ecs-icon-btn:hover:not(:disabled) {
  border-color: #98b7f0;
  background: #f5f9ff;
}
.ecs-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ecs-form-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  color: var(--brand, #006eff);
  font-size: 12px;
  line-height: 1.4;
}
.ecs-form-link:hover {
  color: var(--brand-hover, #0057d9);
}
.ecs-form-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #d6e8ff;
  background: #f3f8ff;
  color: #3b6ea5;
  font-size: 12px;
  line-height: 1.55;
  min-width: 0;
}
.ecs-form-tip span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ecs-tip-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--brand, #006eff);
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

@media (max-width: 1100px) {
  .ecs-region-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .ecs-form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ecs-form-label {
    padding-top: 0;
  }
  .ecs-charge-cards,
  .ecs-region-cards,
  .ecs-network-pair {
    grid-template-columns: 1fr;
  }
  .ecs-region-more-panel {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/* Network & security — modern Aliyun-style panel */
.ecs-netsec-card {
  padding: 18px 22px 20px;
  overflow: visible;
}
.ecs-netsec-head {
  margin-bottom: 4px;
}
.ecs-netsec-head strong {
  font-size: 15px;
  font-weight: 650;
  color: #1f2a37;
}
.ecs-form-label-link {
  display: inline-block;
  margin-top: 6px;
  font-weight: 500;
}
.ecs-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  width: fit-content;
}
.ecs-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ecs-check-box {
  width: 16px;
  height: 16px;
  border: 1px solid #c9d4e3;
  background: #fff;
  position: relative;
  flex: 0 0 auto;
  transition: border-color .15s ease, background .15s ease;
}
.ecs-check input:checked + .ecs-check-box {
  border-color: var(--brand, #006eff);
  background: var(--brand, #006eff);
}
.ecs-check input:checked + .ecs-check-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.ecs-check input:focus-visible + .ecs-check-box {
  box-shadow: 0 0 0 3px rgba(0, 110, 255, 0.16);
}
.ecs-check-text {
  font-size: 13px;
  font-weight: 550;
  color: #1f2a37;
}
.ecs-help-text {
  font-size: 12px;
  color: #98a2b3;
  line-height: 1.55;
}
.ecs-help-text .ecs-form-link {
  margin-left: 4px;
}
.ecs-bw-mode-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 560px;
}
.ecs-bw-mode-card {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  text-align: left;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid #dde3ec;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ecs-bw-mode-card strong {
  font-size: 13px;
  font-weight: 650;
  color: #1f2a37;
}
.ecs-bw-mode-card > span:not(.ecs-bw-mode-rec) {
  font-size: 12px;
  color: #98a2b3;
  line-height: 1.45;
}
.ecs-bw-mode-card:hover:not(:disabled) {
  border-color: #98b7f0;
  background: #f8fbff;
}
.ecs-bw-mode-card.is-active {
  border-color: var(--brand, #006eff);
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px var(--brand, #006eff);
}
.ecs-bw-mode-card.is-active strong {
  color: var(--brand, #006eff);
}
.ecs-bw-mode-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ecs-bw-mode-rec {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: var(--brand, #006eff);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 0 0 0 6px;
}
.ecs-bw-value-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.ecs-bw-presets {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid #dde3ec;
  background: #fff;
}
.ecs-bw-preset {
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid #e8edf4;
  background: transparent;
  color: #344054;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.ecs-bw-preset:last-child {
  border-right: 0;
}
.ecs-bw-preset:hover:not(:disabled) {
  background: #f5f9ff;
  color: var(--brand, #006eff);
}
.ecs-bw-preset.is-active {
  background: #f5f9ff;
  color: var(--brand, #006eff);
  box-shadow: inset 0 0 0 1px var(--brand, #006eff);
  position: relative;
  z-index: 1;
}
.ecs-bw-preset:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ecs-bw-unit {
  color: #667085;
  font-size: 12px;
}
.ecs-bw-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #dde3ec;
  background: #fff;
}
.ecs-bw-step {
  width: 34px;
  height: 34px;
  border: 0;
  background: #f8fafc;
  color: #344054;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.ecs-bw-step:hover:not(:disabled) {
  background: #eef5ff;
  color: var(--brand, #006eff);
}
.ecs-bw-step:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ecs-bw-input {
  width: 64px;
  height: 34px;
  border: 0;
  border-left: 1px solid #e8edf4;
  border-right: 1px solid #e8edf4;
  border-radius: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}
.ecs-bw-stepper .ecs-bw-unit {
  padding: 0 10px 0 0;
}
.ecs-sg-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #eef1f5;
  margin-bottom: 2px;
}
.ecs-sg-tab {
  position: relative;
  padding: 8px 0 10px;
  border: 0;
  background: transparent;
  color: #667085;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.ecs-sg-tab:hover {
  color: var(--brand, #006eff);
}
.ecs-sg-tab.is-active {
  color: var(--brand, #006eff);
}
.ecs-sg-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand, #006eff);
}
.ecs-sg-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.ecs-sg-reselect {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--brand, #006eff);
  background: #fff;
  color: var(--brand, #006eff);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: background .12s ease;
}
.ecs-sg-reselect:hover:not(:disabled) {
  background: #f5f9ff;
}
.ecs-sg-reselect:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ecs-sg-selected {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #e8eef6;
  background: #fbfcfe;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.ecs-sg-selected.is-empty {
  border-style: dashed;
  background: #fafbfc;
}
.ecs-sg-selected-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  min-width: 0;
}
.ecs-sg-selected-main strong {
  font-size: 13px;
  font-weight: 650;
  color: #1f2a37;
}
.ecs-sg-selected-main code {
  font-family: var(--mono);
  font-size: 12px;
  color: #667085;
  background: transparent;
  padding: 0;
}
.ecs-sg-selected-meta {
  font-size: 12px;
  color: #98a2b3;
  line-height: 1.45;
}
.ecs-sg-picker {
  margin-top: 10px;
  border: 1px solid #d7e3f4;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 35, 70, 0.08);
  overflow: hidden;
}
.ecs-sg-picker > .select {
  display: none;
}
.ecs-sg-option-list {
  max-height: 240px;
  overflow: auto;
  padding: 6px;
}
.ecs-sg-option {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background .12s ease;
}
.ecs-sg-option:hover {
  background: #f5f9ff;
}
.ecs-sg-option.is-selected {
  background: #eef5ff;
}
.ecs-sg-option strong {
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
}
.ecs-sg-option.is-selected strong {
  color: var(--brand, #006eff);
}
.ecs-sg-option em {
  font-style: normal;
  font-size: 11px;
  color: #98a2b3;
  font-family: var(--mono);
}
.ecs-sg-option-empty {
  padding: 18px 12px;
  text-align: center;
  color: #98a2b3;
  font-size: 12px;
}
.ecs-sg-create-box {
  margin-top: 12px;
  padding: 16px;
  border: 1px dashed #d7e3f4;
  background: #f8fbff;
  display: grid;
  gap: 12px;
}
.ecs-sg-create-box p {
  margin: 0;
  font-size: 13px;
  color: #475467;
  line-height: 1.55;
}
.ecs-sg-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Storage — disk table */
.ecs-storage-card {
  padding: 18px 22px 20px;
  display: grid;
  gap: 18px;
  overflow: visible;
}
.ecs-storage-head strong {
  font-size: 15px;
  font-weight: 650;
  color: #1f2a37;
}
.ecs-storage-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.ecs-storage-block-title {
  font-size: 13px;
  font-weight: 650;
  color: #344054;
}
.ecs-disk-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  border: 1px solid #e8edf4;
  background: #fff;
}
.ecs-disk-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ecs-disk-table th,
.ecs-disk-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
}
.ecs-disk-table th {
  background: #f7f9fc;
  color: #667085;
  font-weight: 600;
  white-space: nowrap;
}
.ecs-disk-table tbody tr:last-child td {
  border-bottom: 0;
}
.ecs-disk-table tbody tr.ecs-disk-row:hover {
  background: #fbfdff;
}
.ecs-disk-table td.ecs-disk-col-perf {
  width: 100px;
  min-width: 88px;
  vertical-align: middle;
}
.ecs-disk-role {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
}
.ecs-disk-select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
}
.ecs-disk-qty {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-variant-numeric: tabular-nums;
  color: #344054;
  font-weight: 550;
}
.ecs-disk-capacity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
}
.ecs-disk-capacity-input {
  width: 84px;
  height: 32px;
  padding: 0 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ecs-disk-capacity > span {
  color: #98a2b3;
  flex: 0 0 auto;
}
.ecs-disk-perf {
  position: relative;
  width: 100%;
  max-width: 96px;
  min-width: 0;
}
.ecs-disk-perf-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #dde3ec;
  border-radius: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ecs-disk-perf-trigger:hover:not(:disabled) {
  border-color: #98b7f0;
  background: #f8fbff;
}
.ecs-disk-perf.is-open .ecs-disk-perf-trigger {
  border-color: var(--brand, #006eff);
  background: #f5f9ff;
  box-shadow: 0 0 0 3px rgba(0, 110, 255, 0.12);
}
.ecs-disk-perf-trigger strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand, #006eff);
  white-space: nowrap;
}
.ecs-disk-perf-caret {
  display: inline-block;
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #98a2b3;
  transition: transform .18s ease, border-top-color .15s ease;
}
.ecs-disk-perf.is-open .ecs-disk-perf-caret {
  transform: rotate(180deg);
  border-top-color: var(--brand, #006eff);
}
.ecs-disk-perf-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ecs-disk-perf-static {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 2px;
  color: #98a2b3;
  font-size: 13px;
}
/* display 会覆盖原生 [hidden]，必须显式隐藏 */
.ecs-disk-perf-trigger[hidden],
.ecs-disk-perf-static[hidden],
.ecs-disk-perf-panel[hidden] {
  display: none !important;
}
.ecs-disk-perf-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  width: 280px;
  max-width: min(280px, calc(100vw - 32px));
  border: 1px solid #d7e3f4;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 35, 70, 0.12), 0 2px 6px rgba(15, 35, 70, 0.06);
  overflow: hidden;
}
.ecs-disk-perf-panel.is-fixed {
  position: fixed;
  margin: 0;
}
.ecs-disk-perf-option {
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid #f1f4f8;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.ecs-disk-perf-option:last-child {
  border-bottom: 0;
}
.ecs-disk-perf-option:hover:not(:disabled) {
  background: #f5f9ff;
}
.ecs-disk-perf-option.is-selected {
  background: #eef5ff;
}
.ecs-disk-perf-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ecs-disk-perf-option-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ecs-disk-perf-option strong {
  font-size: 13px;
  font-weight: 650;
  color: #1f2a37;
}
.ecs-disk-perf-option.is-selected strong {
  color: var(--brand, #006eff);
}
.ecs-disk-perf-option-badge {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--brand, #006eff);
  font-weight: 600;
}
.ecs-disk-perf-option-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: #667085;
  font-variant-numeric: tabular-nums;
}
.ecs-disk-perf-option em {
  font-style: normal;
  font-size: 11px;
  color: #f79009;
}
.ecs-disk-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 32px;
}
.ecs-disk-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475467;
  cursor: pointer;
  user-select: none;
}
.ecs-disk-check input {
  width: 14px;
  height: 14px;
  accent-color: var(--brand, #006eff);
}
.ecs-disk-check.is-locked {
  cursor: default;
  color: #98a2b3;
}
.ecs-disk-remove {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #f3d1d1;
  background: #fff;
  color: #d92d20;
  font-size: 12px;
  cursor: pointer;
}
.ecs-disk-remove:hover:not(:disabled) {
  background: #fff5f5;
}
.ecs-disk-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ecs-disk-add-row td {
  background: #fbfcfe;
  padding: 14px;
}
.ecs-disk-add-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.ecs-disk-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px dashed #98b7f0;
  background: #f8fbff;
  color: var(--brand, #006eff);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.ecs-disk-add-btn span {
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
}
.ecs-disk-add-btn:hover:not(:disabled) {
  background: #eef5ff;
  border-color: var(--brand, #006eff);
}
.ecs-disk-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ecs-disk-add-meta {
  font-size: 12px;
  color: #98a2b3;
}
.ecs-storage-quota {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.ecs-storage-quota-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}
.ecs-storage-quota-head strong {
  font-size: 13px;
  font-weight: 650;
  color: #344054;
}
.ecs-storage-quota-table-wrap {
  border: 1px solid #e8edf4;
  overflow-x: auto;
}
.ecs-storage-quota-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}
.ecs-storage-quota-table th,
.ecs-storage-quota-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  font-size: 12px;
}
.ecs-storage-quota-table th {
  background: #f7f9fc;
  color: #667085;
  font-weight: 600;
}
.ecs-storage-quota-table tbody tr:last-child td {
  border-bottom: 0;
}
.ecs-storage-quota-table td {
  color: #344054;
}
.ecs-storage-quota-empty {
  text-align: center !important;
  color: #98a2b3 !important;
}
.ecs-storage-notes {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}
.ecs-storage-notes strong {
  font-size: 12px;
  font-weight: 650;
  color: #667085;
}
.ecs-storage-notes ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.55;
}

/* Purchase settings */
.ecs-purchase-card {
  padding: 18px 22px 20px;
  display: grid;
  gap: 18px;
  overflow: visible;
}
.ecs-purchase-head strong {
  font-size: 15px;
  font-weight: 650;
  color: #1f2a37;
}
.ecs-purchase-state {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.ecs-period-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  max-width: 640px;
  width: 100%;
}
.ecs-period-chip {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dde3ec;
  background: #fff;
  color: #344054;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.ecs-period-chip strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.ecs-period-chip.is-year strong {
  font-weight: 650;
}
.ecs-period-chip em {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  background: var(--brand, #006eff);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.ecs-period-chip:hover:not(:disabled) {
  border-color: #98b7f0;
  background: #f8fbff;
  color: var(--brand, #006eff);
}
.ecs-period-chip.is-active {
  border-color: var(--brand, #006eff);
  background: #f5f9ff;
  color: var(--brand, #006eff);
  box-shadow: inset 0 0 0 1px var(--brand, #006eff);
}
.ecs-period-chip.is-active strong {
  color: var(--brand, #006eff);
}
.ecs-period-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ecs-purchase-hint-box {
  display: grid;
  gap: 4px;
  max-width: 560px;
  padding: 12px 14px;
  border: 1px solid #e8edf4;
  background: #f8fafc;
}
.ecs-purchase-hint-box.is-postpaid {
  border-color: #d7e3f4;
  background: #f5f9ff;
}
.ecs-purchase-hint-box strong {
  font-size: 13px;
  font-weight: 650;
  color: #1f2a37;
}
.ecs-purchase-hint-box.is-postpaid strong {
  color: var(--brand, #006eff);
}
.ecs-purchase-hint-box span {
  font-size: 12px;
  color: #667085;
  line-height: 1.5;
}
.ecs-amount-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.ecs-amount-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #dde3ec;
  background: #fff;
}
.ecs-amount-step {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #344054;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.ecs-amount-step:hover:not(:disabled) {
  background: #f5f9ff;
  color: var(--brand, #006eff);
}
.ecs-amount-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ecs-amount-input {
  width: 64px;
  height: 34px;
  border: 0;
  border-left: 1px solid #e8edf4;
  border-right: 1px solid #e8edf4;
  border-radius: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
  padding: 0 6px;
}
.ecs-amount-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--brand, #006eff);
}
.ecs-amount-unit {
  font-size: 13px;
  color: #667085;
  font-weight: 550;
}
.ecs-amount-meta {
  font-size: 12px;
  color: #98a2b3;
}
.ecs-purchase-input {
  max-width: 420px;
  height: 36px;
}
.ecs-purchase-cred-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px));
  gap: 12px 16px;
  max-width: 576px;
}
.ecs-purchase-cred-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.ecs-purchase-cred-field .ecs-purchase-input {
  max-width: none;
  width: 100%;
}
.ecs-purchase-sublabel {
  font-size: 12px;
  font-weight: 600;
  color: #667085;
}
.ecs-purchase-notes {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}
.ecs-purchase-notes strong {
  font-size: 12px;
  font-weight: 650;
  color: #667085;
}
.ecs-purchase-notes ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 960px) {
  .ecs-bw-mode-cards {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .ecs-bw-value-bar {
    align-items: stretch;
  }
  .ecs-bw-presets {
    width: 100%;
  }
  .ecs-bw-preset {
    flex: 1 1 0;
    min-width: 0;
  }
  .ecs-disk-perf-panel {
    left: 0;
    right: auto;
  }
  .ecs-period-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    max-width: none;
  }
  .ecs-purchase-cred-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .ecs-purchase-input {
    max-width: none;
  }
  .ecs-amount-bar {
    align-items: flex-start;
  }
}

.ecs-create-page .ecs-type-table-head,
.ecs-create-page .ecs-type-card .plan-main {
  grid-template-columns: minmax(0, 1.6fr) 88px 96px minmax(88px, 1fr) 108px;
  gap: 10px;
}
.ecs-create-page .ecs-type-table-head {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0.01em;
  color: #667085;
  background: linear-gradient(180deg, #f7f9fc 0%, #f1f4f8 100%);
  align-items: center;
}
.ecs-create-page .ecs-type-table-head > span:last-child {
  text-align: right;
}
.ecs-create-page .ecs-type-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 560;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  user-select: none;
}
.ecs-create-page .ecs-type-sort:hover {
  color: var(--brand, #006eff);
}
.ecs-create-page .ecs-type-sort.is-active {
  color: var(--brand, #006eff);
  font-weight: 650;
}
.ecs-create-page .ecs-type-sort-icons {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 10px;
  height: 14px;
}
.ecs-create-page .ecs-type-sort-up,
.ecs-create-page .ecs-type-sort-down {
  display: block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  opacity: 0.35;
}
.ecs-create-page .ecs-type-sort-up {
  border-bottom: 4px solid currentColor;
}
.ecs-create-page .ecs-type-sort-down {
  border-top: 4px solid currentColor;
}
.ecs-create-page .ecs-type-sort.is-asc .ecs-type-sort-up,
.ecs-create-page .ecs-type-sort.is-desc .ecs-type-sort-down {
  opacity: 1;
}
.ecs-create-page .ecs-type-card .plan-main {
  padding: 10px 14px;
  min-height: 52px;
}
.ecs-create-page .ecs-type-card .plan-spec strong {
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: -0.01em;
}
.ecs-create-page .ecs-type-card .plan-cpu,
.ecs-create-page .ecs-type-card .plan-mem {
  font-size: 12px;
  font-weight: 600;
  color: #344054;
  white-space: nowrap;
}
.ecs-create-page .ecs-type-card .plan-type {
  font-size: 12px;
  color: #667085;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ecs-create-page .ecs-type-card .plan-price {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
  font-size: 13px;
  font-weight: 650;
  color: #c2410c;
  white-space: nowrap;
  line-height: 1.25;
}
.ecs-create-page .ecs-type-card .plan-price strong {
  font-size: 13px;
  font-weight: 650;
  color: inherit;
}
.ecs-create-page .ecs-type-card .plan-price-origin {
  font-size: 11px;
  font-weight: 500;
  color: #98a2b3;
  text-decoration: line-through;
}
.ecs-create-page .ecs-type-card .plan-price.is-missing,
.ecs-create-page .ecs-type-card .plan-price.is-loading {
  color: #98a2b3;
  font-weight: 500;
}
.ecs-create-page .ecs-type-price-loading {
  font-size: 12px;
  color: #98a2b3;
}
.ecs-create-page .ecs-type-price-refresh {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid #d7e3f4;
  background: #f8fbff;
  color: var(--brand, #006eff);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ecs-create-page .ecs-type-price-refresh:hover {
  background: #eef5ff;
  border-color: var(--brand, #006eff);
}
.ecs-create-page .ecs-type-price-refresh svg {
  flex: 0 0 auto;
}
.ecs-create-page .ecs-type-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid #e8ecf1;
  background: #fff;
  z-index: 2;
}
.ecs-create-page .ecs-type-pager[hidden] {
  display: none !important;
}
.ecs-create-page .ecs-type-pager-meta {
  font-size: 12px;
  color: #98a2b3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ecs-create-page .ecs-type-pager .pagination {
  margin-left: auto;
  flex-wrap: nowrap;
  gap: 4px;
}
.ecs-create-page .ecs-type-pager .page-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
}
.ecs-create-page .ecs-type-pager .page-ellipsis {
  min-width: 20px;
  text-align: center;
  color: #98a2b3;
}
.ecs-create-page .ecs-type-card.active .plan-main {
  background: #eff4ff;
  box-shadow: inset 3px 0 0 #2f6fed;
}
.ecs-create-page .ecs-type-card.active .plan-spec strong {
  color: #1d4ed8;
}
.ecs-create-page .ecs-type-card .plan-main:hover {
  background: #f5f8ff;
}
.ecs-create-page .ecs-type-card .plan-caret {
  display: none;
}

/* ECS image picker — 4 cards + more dropdown, version under selection */
.ecs-create-page .ecs-image-picker {
  display: grid;
  gap: 14px;
  padding-top: 6px;
  min-width: 0;
  overflow: visible;
}
.ecs-create-page .ecs-image-section {
  overflow: visible;
}
.ecs-image-family-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.ecs-create-page .ecs-image-section .ecs-image-family-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 76px;
  padding: 14px 14px;
  border: 1px solid #dde3ec;
  border-radius: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ecs-create-page .ecs-image-section .ecs-image-family-card:hover {
  border-color: #98b7f0;
  background: #f8fbff;
}
.ecs-create-page .ecs-image-section .ecs-image-family-card.is-active {
  border-color: var(--brand, #006eff);
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px var(--brand, #006eff);
}
.ecs-create-page .ecs-image-section .ecs-image-family-card .family-icon,
.ecs-create-page .ecs-image-section .ecs-image-family-card .family-icon-svg,
.ecs-create-page .ecs-image-section .ecs-image-family-card .family-more-visual {
  width: 40px;
  height: 40px;
}
.ecs-create-page .ecs-image-section .ecs-image-family-card .family-icon-svg img {
  width: 40px;
  height: 40px;
}
.ecs-create-page .ecs-image-section .ecs-image-family-card .family-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ecs-create-page .ecs-image-section .ecs-image-family-card .family-name {
  font-size: 13px;
  font-weight: 650;
  color: #1f2a37;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.ecs-create-page .ecs-image-section .ecs-image-family-card.is-active .family-name {
  color: var(--brand, #006eff);
}
.ecs-create-page .ecs-image-section .ecs-image-family-card .family-count {
  font-size: 11px;
  color: #98a2b3;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecs-image-more {
  position: relative;
  min-width: 0;
}
.ecs-image-more.is-active .ecs-image-family-card {
  border-color: var(--brand, #006eff);
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px var(--brand, #006eff);
}
.ecs-image-more.is-active .family-name,
.ecs-image-more.is-active .ecs-image-more-caret {
  color: var(--brand, #006eff);
}
.ecs-image-more.is-open .ecs-image-family-card {
  border-color: var(--brand, #006eff);
}
.ecs-image-more.is-open .ecs-image-more-caret {
  transform: rotate(180deg);
  color: var(--brand, #006eff);
}
.ecs-create-page .ecs-image-section .ecs-image-family-card.is-more {
  border-style: solid;
  width: 100%;
}
.ecs-image-more-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -6px;
  display: inline-flex;
  color: #98a2b3;
  transition: transform .18s ease, color .15s ease;
}
.ecs-image-more-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: auto;
  right: 0;
  z-index: 45;
  min-width: 100%;
  width: max(100%, 280px);
  max-width: min(360px, calc(100vw - 48px));
  border: 1px solid #d7e3f4;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 35, 70, 0.12), 0 2px 6px rgba(15, 35, 70, 0.06);
  overflow: hidden;
}
.ecs-image-more-head {
  padding: 10px;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.ecs-image-more-search {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #d9e2ef;
  background: #fff;
}
.ecs-image-more-search:focus {
  outline: none;
  border-color: var(--brand, #006eff);
  box-shadow: 0 0 0 3px rgba(0, 110, 255, 0.12);
}
.ecs-image-more-list {
  max-height: 280px;
  overflow: auto;
  padding: 6px;
}
.ecs-image-more-empty {
  padding: 18px 12px;
  text-align: center;
  color: #98a2b3;
  font-size: 12px;
}
.ecs-image-more-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.ecs-image-more-option:hover {
  background: #f5f9ff;
}
.ecs-image-more-option.is-selected {
  background: #eef5ff;
}
.ecs-image-more-option .family-icon,
.ecs-image-more-option .family-icon-svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.ecs-image-more-option .family-icon-svg img {
  width: 28px;
  height: 28px;
}
.ecs-image-more-option-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ecs-image-more-option-main strong {
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecs-image-more-option.is-selected .ecs-image-more-option-main strong {
  color: var(--brand, #006eff);
}
.ecs-image-more-option-main em {
  font-style: normal;
  font-size: 11px;
  color: #98a2b3;
}
.ecs-image-version-bar {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px 16px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid #e8eef6;
  background: linear-gradient(180deg, #fbfcfe 0%, #fff 100%);
  animation: ecs-image-version-in .18s ease;
}
@keyframes ecs-image-version-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ecs-image-version-label {
  display: grid;
  gap: 4px;
  padding-top: 10px;
}
.ecs-image-version-label span {
  font-size: 13px;
  font-weight: 650;
  color: #1f2a37;
}
.ecs-image-version-label em {
  font-style: normal;
  font-size: 12px;
  color: #98a2b3;
}
.ecs-image-version-dd {
  position: relative;
  min-width: 0;
}
.ecs-image-version-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #dde3ec;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ecs-image-version-trigger:hover {
  border-color: #98b7f0;
  background: #f8fbff;
}
.ecs-image-version-dd.is-open .ecs-image-version-trigger {
  border-color: var(--brand, #006eff);
  box-shadow: 0 0 0 3px rgba(0, 110, 255, 0.12);
}
.ecs-image-version-dd.is-open .ecs-image-version-caret {
  transform: rotate(180deg);
  color: var(--brand, #006eff);
}
.ecs-image-version-trigger-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ecs-image-version-trigger-main strong {
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecs-image-version-trigger-main em {
  font-style: normal;
  font-size: 11px;
  color: #98a2b3;
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecs-image-version-caret {
  flex: 0 0 auto;
  display: inline-flex;
  color: #98a2b3;
  transition: transform .18s ease, color .15s ease;
}
.ecs-image-version-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 46;
  border: 1px solid #d7e3f4;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 35, 70, 0.12), 0 2px 6px rgba(15, 35, 70, 0.06);
  overflow: hidden;
}
.ecs-image-version-list {
  max-height: 280px;
  overflow: auto;
  padding: 6px;
}
.ecs-image-version-option {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.ecs-image-version-option:hover {
  background: #f5f9ff;
}
.ecs-image-version-option.is-selected {
  background: #eef5ff;
}
.ecs-image-version-option strong {
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
  line-height: 1.35;
}
.ecs-image-version-option.is-selected strong {
  color: var(--brand, #006eff);
}
.ecs-image-version-option em {
  font-style: normal;
  font-size: 11px;
  color: #98a2b3;
  font-family: var(--mono);
}
.ecs-image-version-option span {
  font-size: 11px;
  color: #98a2b3;
}

@media (max-width: 1100px) {
  .ecs-image-family-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .ecs-create-page .ecs-image-section .swas-image-family-grid,
  .ecs-image-family-row {
    grid-template-columns: 1fr;
  }
  .ecs-image-version-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ecs-image-version-label {
    padding-top: 0;
  }
  .ecs-image-more-panel {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 960px) {
  .ecs-create-page .ecs-type-scroll {
    max-height: min(56vh, 480px);
  }
  .ecs-create-page .ecs-type-pager {
    padding: 10px 12px;
    gap: 8px;
  }
  .ecs-create-page .ecs-type-pager-meta {
    width: 100%;
  }
  .ecs-create-page .ecs-type-pager .pagination {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .ecs-create-page .ecs-type-table-head {
    display: none;
  }
  .ecs-create-page .ecs-type-card .plan-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "spec caret"
      "cpu caret"
      "mem caret"
      "type caret"
      "price caret";
    gap: 4px 8px;
    padding: 12px 14px;
  }
  .ecs-create-page .ecs-type-card .plan-spec { grid-area: spec; }
  .ecs-create-page .ecs-type-card .plan-cpu { grid-area: cpu; }
  .ecs-create-page .ecs-type-card .plan-mem { grid-area: mem; }
  .ecs-create-page .ecs-type-card .plan-type { grid-area: type; }
  .ecs-create-page .ecs-type-card .plan-price {
    grid-area: price;
    justify-items: start;
    text-align: left;
    margin-top: 2px;
  }
  .ecs-create-page .ecs-type-card .plan-caret {
    grid-area: caret;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    transition: transform .15s ease;
  }
  .ecs-create-page .ecs-type-card.is-expanded .plan-caret {
    transform: rotate(180deg);
  }
  .ecs-create-page .ecs-type-card .plan-cpu::before {
    content: "vCPU · ";
    color: #98a2b3;
    font-weight: 500;
  }
  .ecs-create-page .ecs-type-card .plan-mem::before {
    content: "内存 · ";
    color: #98a2b3;
    font-weight: 500;
  }
  .ecs-create-page .ecs-type-card .plan-type::before {
    content: "规格族 · ";
    color: #98a2b3;
    font-weight: 500;
  }
  .ecs-create-page .ecs-type-card .plan-detail {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 0 14px 12px;
    background: #f8fafc;
    border-top: 1px solid #eef1f5;
  }
  .ecs-create-page .ecs-type-card.is-expanded .plan-detail {
    display: grid;
  }
  .ecs-create-page .ecs-type-card .plan-detail-row {
    display: grid;
    gap: 2px;
  }
  .ecs-create-page .ecs-type-card .plan-detail-row span {
    font-size: 11px;
    color: #98a2b3;
  }
  .ecs-create-page .ecs-type-card .plan-detail-row strong {
    font-size: 12px;
    font-weight: 560;
    color: #344054;
    word-break: break-all;
  }
}

/* —— 定时任务 —— */
.cron-config-panel {
  margin-bottom: 16px;
}
.cron-settings-form {
  display: grid;
  gap: 0;
}
.cron-config-section {
  padding: 4px 0 18px;
  border-bottom: 1px solid #f0f2f5;
  margin-bottom: 18px;
}
.cron-config-section:last-of-type {
  border-bottom: none;
  margin-bottom: 8px;
  padding-bottom: 8px;
}
.cron-config-label {
  margin-bottom: 12px;
}
.cron-config-label strong {
  display: block;
  font-size: 13px;
  color: #1f2937;
}
.cron-config-label span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #98a2b3;
  line-height: 1.45;
}
.cron-switch-list {
  display: grid;
  gap: 0;
  border: 1px solid #eef2f6;
  border-radius: 8px;
  overflow: hidden;
  background: #fafbfc;
}
.cron-latest {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 14px 16px;
}
.cron-latest-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.cron-latest-main strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}
.cron-latest-main p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}
.cron-latest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #98a2b3;
  font-size: 12px;
  white-space: nowrap;
}
.cron-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f6;
  cursor: pointer;
  background: #fff;
}
.cron-switch-row:last-child {
  border-bottom: none;
}
.cron-switch-row strong {
  display: block;
  font-size: 13px;
  color: #1f2937;
}
.cron-switch-row em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 12px;
  color: #98a2b3;
  line-height: 1.45;
}
.cron-token-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cron-script-panel {
  margin-bottom: 16px;
}
.cron-script-intro {
  margin: 0 0 14px;
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
}
.cron-code-block {
  position: relative;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 14px 12px 14px 14px;
}
.cron-code-block pre {
  margin: 0;
  padding-right: 72px;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}
.cron-code-block .btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
.cron-bt-steps {
  margin-top: 18px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 8px;
}
.cron-bt-steps h4 {
  margin: 0 0 8px;
  font-size: 13px;
}
.cron-bt-steps ol {
  margin: 0;
  padding-left: 18px;
  color: #475467;
  font-size: 13px;
  line-height: 1.7;
}
.panel-body-flush {
  padding: 0;
}
.cron-log-panel .panel-head {
  align-items: center;
}
.cron-log-count {
  font-size: 12px;
  color: #98a2b3;
  font-weight: 500;
}
.cron-log-wrap {
  overflow-x: auto;
}
.cron-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 780px;
}
.cron-log-table th,
.cron-log-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: middle;
}
.cron-log-table th {
  background: #fafbfc;
  color: #667085;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
.cron-log-table tbody tr.cron-log-row:hover {
  background: #fafcff;
}
.cron-log-table tbody tr.cron-log-row.is-expandable {
  cursor: pointer;
}
.cron-log-table tbody tr.cron-log-row.is-open {
  background: #f8faff;
}
.cron-log-table tbody tr.cron-log-row.is-open td {
  border-bottom-color: transparent;
}
.cron-log-table .col-time { width: 108px; }
.cron-log-table .col-status { width: 88px; }
.cron-log-table .col-source { width: 88px; }
.cron-log-table .col-tasks { width: 168px; }
.cron-log-table .col-duration { width: 72px; }
.cron-log-table .col-toggle { width: 44px; text-align: right; padding-right: 12px; }
.cron-log-time {
  display: grid;
  gap: 2px;
}
.cron-log-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  color: #1f2937;
  font-size: 13px;
}
.cron-log-date {
  font-size: 11px;
  color: #98a2b3;
  font-variant-numeric: tabular-nums;
}
.cron-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cron-badge-ok {
  color: #067647;
  background: #ecfdf3;
  border-color: #abefc6;
}
.cron-badge-warn {
  color: #b54708;
  background: #fffaeb;
  border-color: #fedf89;
}
.cron-badge-danger {
  color: #b42318;
  background: #fef3f2;
  border-color: #fecdca;
}
.cron-badge-info {
  color: #175cd3;
  background: #eff8ff;
  border-color: #b2ddff;
}
.cron-badge-muted {
  color: #667085;
  background: #f2f4f7;
  border-color: #e4e7ec;
}
.cron-source-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  color: #475467;
  background: #f2f4f7;
  border-radius: 4px;
  white-space: nowrap;
}
.cron-task-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cron-task-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  color: #344054;
  background: #eef4ff;
  border: 1px solid #d6e4ff;
  border-radius: 4px;
  white-space: nowrap;
}
.cron-task-chip.is-soft {
  color: #667085;
  background: #f8fafc;
  border-color: #e4e7ec;
}
.cron-log-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 4px;
}
.cron-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.cron-stat em {
  font-style: normal;
  font-size: 11px;
  color: #98a2b3;
}
.cron-stat strong {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}
.cron-stat.is-warn strong { color: #b54708; }
.cron-stat.is-danger strong { color: #b42318; }
.cron-log-summary {
  max-width: 420px;
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cron-duration {
  font-variant-numeric: tabular-nums;
  color: #475467;
  font-size: 12px;
}
.cron-log-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #98a2b3;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
.cron-log-expand:hover {
  color: #2f6fed;
  background: #eef4ff;
}
.cron-log-row.is-open .cron-log-expand {
  transform: rotate(180deg);
  color: #2f6fed;
}
.cron-log-detail td {
  padding: 0 14px 14px;
  background: #f8faff;
  border-bottom: 1px solid #e8eef8;
}
.cron-log-detail-shell {
  width: 0;
  min-width: 100%;
}
.cron-log-detail-inner {
  display: grid;
  gap: 8px;
  padding: 4px 0 2px;
  max-width: 100%;
  box-sizing: border-box;
}
.cron-log-item {
  background: #fff;
  border: 1px solid #e8eef8;
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 0;
  box-sizing: border-box;
}
.cron-log-item.is-fail {
  border-color: #fecdca;
  background: #fffbfa;
}
.cron-log-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  min-width: 0;
}
.cron-log-item-head strong {
  font-size: 13px;
  color: #1f2937;
  min-width: 0;
  word-break: break-word;
}
.cron-log-item-flag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 560;
  flex-shrink: 0;
}
.cron-log-item-flag.is-ok {
  color: #067647;
  background: #ecfdf3;
}
.cron-log-item-flag.is-fail {
  color: #b42318;
  background: #fef3f2;
}
.cron-log-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 4px;
  color: #667085;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.cron-log-item-msg {
  color: #475467;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.cron-log-item-errors {
  margin: 8px 0 0;
  padding-left: 16px;
  color: #b42318;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.nowrap {
  white-space: nowrap;
}
.empty-state {
  padding: 28px 16px;
  text-align: center;
  color: #98a2b3;
  font-size: 13px;
}
@media (max-width: 960px) {
  .cron-latest {
    flex-direction: column;
  }
  .cron-token-row {
    flex-wrap: wrap;
  }
  .cron-code-block pre {
    padding-right: 0;
    padding-top: 36px;
  }
  .cron-log-summary {
    max-width: 180px;
  }
  .cron-log-detail td {
    padding: 0 10px 12px;
  }
  .cron-log-detail-shell {
    width: auto;
    min-width: 0;
    max-width: calc(100vw - 48px);
  }
  .cron-log-detail-inner {
    gap: 6px;
    max-width: calc(100vw - 48px);
  }
  .cron-log-item {
    padding: 8px 10px;
    border-radius: 6px;
  }
  .cron-log-item-head {
    gap: 6px;
    margin-bottom: 4px;
  }
  .cron-log-item-head strong {
    font-size: 12px;
    line-height: 1.35;
  }
  .cron-log-item-flag {
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
  }
  .cron-log-item-meta {
    gap: 6px 10px;
    margin-bottom: 2px;
    font-size: 11px;
  }
  .cron-log-item-msg,
  .cron-log-item-errors {
    font-size: 11px;
    line-height: 1.45;
  }
  .cron-log-item .cron-task-chip {
    height: 18px;
    padding: 0 6px;
    font-size: 10px;
  }
  .cron-log-panel .table-footer {
    gap: 8px;
  }
  .cron-log-panel .pagination {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ── 产品管理（pm-）──────────────────────────────────────── */
.pm-hub {
  max-width: 1100px;
}
.pm-hub-hero {
  margin-bottom: 28px;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, rgba(0, 110, 255, 0.06) 0%, rgba(255, 106, 0, 0.04) 48%, #fff 72%),
    #fff;
  border: 1px solid #e8e8e8;
  position: relative;
  overflow: hidden;
}
.pm-hub-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -48px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 110, 255, 0.10) 0%, transparent 68%);
  pointer-events: none;
}
.pm-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.pm-hub-hero h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 650;
  color: #111;
  letter-spacing: -0.02em;
}
.pm-hub-lead {
  margin: 0;
  max-width: 520px;
  font-size: 13px;
  line-height: 1.65;
  color: #666;
}

.pm-section {
  margin-bottom: 28px;
}
.pm-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebebeb;
}
.pm-section-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: #111;
}
.pm-section-title p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}
.pm-section-count {
  flex-shrink: 0;
  font-size: 12px;
  color: #999;
  font-variant-numeric: tabular-nums;
}

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

.pm-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 176px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e8e8e8;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
a.pm-tile.is-live:hover {
  border-color: #b7d4ff;
  box-shadow: 0 8px 20px rgba(0, 40, 100, 0.06);
  transform: translateY(-1px);
}
a.pm-tile.is-live:hover .pm-tile-cta {
  color: var(--brand-hover);
}
.pm-tile.is-soon {
  background: #fafafa;
  border-style: dashed;
  border-color: #ddd;
  opacity: 0.92;
}

.pm-tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pm-tile-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pm-tile-logo {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  font-size: 12px;
}
.pm-tile-name strong {
  display: block;
  font-size: 15px;
  font-weight: 650;
  color: #111;
  line-height: 1.3;
}
.pm-tile-name span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #999;
  font-family: var(--mono);
}

.pm-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
  line-height: 1;
}
.pm-chip-ok {
  color: #067647;
  background: #ecfdf3;
  border-color: #abefc6;
}
.pm-chip-info {
  color: #175cd3;
  background: #eff8ff;
  border-color: #b2ddff;
}
.pm-chip-warn {
  color: #b54708;
  background: #fffaeb;
  border-color: #fedf89;
}
.pm-chip-muted {
  color: #666;
  background: #f5f5f5;
  border-color: #e8e8e8;
}

.pm-tile-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #f0f0f0;
  background: #fafafa;
}
.pm-metric {
  padding: 10px 12px;
  border-right: 1px solid #f0f0f0;
}
.pm-metric:last-child { border-right: 0; }
.pm-metric span {
  display: block;
  font-size: 11px;
  color: #999;
  margin-bottom: 4px;
}
.pm-metric strong {
  font-size: 14px;
  font-weight: 650;
  color: #222;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.pm-tile-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: 1px dashed #e0e0e0;
  background: #f7f7f7;
  color: #999;
  font-size: 12px;
}

.pm-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 2px;
  font-size: 12px;
  color: #888;
  line-height: 1.4;
}
.pm-tile-cta {
  font-style: normal;
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}
.pm-tile-cta::after {
  content: " →";
}

/* ── ECS 目录详情 ─────────────────────────────────────────── */
.pm-ecs {
  max-width: 1280px;
}
.pm-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #999;
}
.pm-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #666;
  font-weight: 500;
}
.pm-crumb a:hover { color: var(--brand); }
.pm-crumb-sep { color: #d0d0d0; }
.pm-crumb-current { color: #333; font-weight: 500; }

.pm-ecs-masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e8e8e8;
}
.pm-ecs-identity {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.pm-ecs-logo {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  font-size: 13px;
  flex-shrink: 0;
}
.pm-ecs-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pm-ecs-title-row h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: #111;
}
.pm-ecs-identity p {
  margin: 0;
  max-width: 560px;
  font-size: 12px;
  line-height: 1.6;
  color: #666;
}
.pm-ecs-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.pm-banner {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #fedf89;
  background: #fffaeb;
  color: #93370d;
  font-size: 12px;
  line-height: 1.6;
}
.pm-banner a {
  color: #b54708;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pm-banner-warn { /* alias kept for clarity */ }

.pm-ecs-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.pm-ecs-rail {
  position: sticky;
  top: 16px;
  background: #fff;
  border: 1px solid #e8e8e8;
}
.pm-rail-label {
  padding: 12px 14px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #999;
}
.pm-rail-nav {
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
  gap: 2px;
}
.pm-rail-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  color: #444;
  font-size: 13px;
  font-weight: 500;
  border-left: 2px solid transparent;
}
.pm-rail-nav a:hover {
  background: #f7f8fa;
  color: #111;
}
.pm-rail-nav a.active {
  background: var(--brand-soft);
  color: var(--brand);
  border-left-color: var(--brand);
  font-weight: 600;
}
.pm-rail-nav a em {
  font-style: normal;
  font-size: 11px;
  font-weight: 550;
  color: #999;
  font-variant-numeric: tabular-nums;
  min-width: 1.5em;
  text-align: right;
}
.pm-rail-nav a.active em {
  color: var(--brand);
}

.pm-rail-sync {
  margin: 4px 12px 12px;
  padding: 12px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
}
.pm-rail-sync-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pm-rail-sync-head strong {
  font-size: 13px;
  color: #111;
}
.pm-rail-sync p {
  margin: 6px 0 0;
  font-size: 12px;
  color: #999;
  line-height: 1.45;
}
.pm-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d0d0d0;
  flex-shrink: 0;
}
.pm-phase-dot.is-active {
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 110, 255, 0.14);
}
.pm-phase-dot.is-done {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(0, 167, 0, 0.14);
}

.pm-ecs-stage {
  min-width: 0;
}
.pm-stage-head {
  margin-bottom: 12px;
}
.pm-stage-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  color: #111;
}
.pm-stage-head p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #999;
}

.pm-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.pm-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e8e8e8;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.pm-kpi-card:hover {
  border-color: #b7d4ff;
  box-shadow: 0 4px 14px rgba(0, 40, 100, 0.05);
}
.pm-kpi-label {
  font-size: 12px;
  color: #888;
}
.pm-kpi-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #111;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pm-kpi-value em {
  font-style: normal;
  font-size: 13px;
  font-weight: 550;
  color: #999;
  margin-left: 2px;
}
.pm-kpi-link {
  margin-top: 4px;
  font-size: 12px;
  color: var(--brand);
  font-weight: 550;
}

.pm-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.pm-info-card {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e8e8e8;
}
.pm-info-card h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 650;
  color: #111;
}
.pm-info-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: #666;
}
.pm-quick-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e8e8e8;
}
.pm-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 128px;
}
.pm-filter span {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}
.pm-filter .input {
  min-width: 128px;
  height: 32px;
}
.pm-filter-grow {
  flex: 1 1 200px;
  min-width: 200px;
}
.pm-filters > .btn {
  height: 32px;
}

.pm-surface {
  background: #fff;
  border: 1px solid #e8e8e8;
  overflow: hidden;
}
.pm-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.pm-table th,
.pm-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
  background: #fff;
}
.pm-table th {
  background: #fafafa;
  color: #666;
  font-weight: 550;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom-color: #ebebeb;
}
.pm-table tbody tr:hover td {
  background: #f7fbff;
}
.pm-table tbody tr:last-child td {
  border-bottom: 0;
}
.pm-table tbody tr.is-toggling {
  opacity: 0.55;
  pointer-events: none;
}
.pm-table .pm-col-name {
  min-width: 160px;
}
.pm-table .pm-col-name strong {
  font-size: 13px;
  font-weight: 600;
  color: #111;
}
.pm-table .pm-col-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 550;
  color: #222;
}
.pm-table th.pm-col-price {
  text-align: right;
}
.pm-table .pm-col-switch {
  width: 104px;
  min-width: 104px;
  text-align: center;
  white-space: nowrap;
  position: sticky;
  right: 0;
  z-index: 2;
  box-shadow: -8px 0 10px -8px rgba(0, 0, 0, 0.10);
}
.pm-table th.pm-col-switch {
  text-align: center;
  z-index: 3;
  background: #fafafa;
}
.pm-table tbody tr:hover td.pm-col-switch {
  background: #f7fbff;
}
.pm-table .pm-col-switch .switch {
  justify-content: center;
}
.pm-muted {
  color: #888;
}
.pm-code {
  font-family: var(--mono);
  font-size: 12px;
  color: #333;
  background: #f5f5f5;
  border: 1px solid #ececec;
  padding: 1px 6px;
  border-radius: 2px;
}
.pm-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.35;
}
.pm-cell-stack > span {
  color: #888;
  font-size: 12px;
}

.pm-empty {
  padding: 48px 16px;
  text-align: center;
  color: #999;
  font-size: 13px;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(0, 0, 0, 0.015) 6px,
      rgba(0, 0, 0, 0.015) 7px
    ),
    #fcfcfc;
  letter-spacing: 0.01em;
}

/* 镜像：系统族折叠 */
.pm-family-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  max-width: 100%;
}
.pm-family-toggle:hover .pm-family-name strong {
  color: var(--brand);
}
.pm-family-caret {
  flex-shrink: 0;
  color: #999;
  transition: transform .15s var(--ease);
}
.pm-family-toggle.is-open .pm-family-caret {
  transform: rotate(90deg);
  color: var(--brand);
}
.pm-family-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pm-family-name strong {
  font-size: 13px;
  font-weight: 600;
  color: #111;
}
.pm-family-name em {
  font-style: normal;
  font-size: 11px;
  color: #999;
  font-family: var(--mono);
}
.pm-family-row.is-open > td {
  background: #f7fbff;
}
.pm-family-versions > td {
  padding: 0 !important;
  background: #fafbfc;
  border-bottom: 1px solid #ebebeb;
}
.pm-family-versions.is-toggling {
  opacity: 0.55;
  pointer-events: none;
}
.pm-family-versions-empty {
  padding: 16px 20px;
  color: #999;
  font-size: 12px;
}
.pm-image-version-table {
  min-width: 640px;
  border-top: 1px solid #f0f0f0;
}
.pm-image-version-table th {
  background: #f3f5f7;
  position: static;
}
.pm-image-version-table td,
.pm-image-version-table th {
  padding: 9px 14px 9px 36px;
}
.pm-image-version-table .pm-col-switch,
.pm-image-version-table th.pm-col-switch {
  padding-right: 14px;
}
.pm-image-family-table > tbody > tr.pm-family-row > td.pm-col-switch,
.pm-image-version-table .pm-col-switch {
  box-shadow: none;
}
.switch-track.is-partial {
  background: #93c5fd;
}
.switch-track.is-partial::after {
  transform: translateX(9px);
}

/* 后台同步锁定层 —— 视口居中状态面板 */
.pm-ecs {
  position: relative;
}
.pm-ecs.is-sync-locked {
  pointer-events: none;
  user-select: none;
}
.pm-ecs.is-sync-locked .pm-sync-lock {
  pointer-events: auto;
}
.pm-ecs.is-sync-locked .pm-ecs-shell,
.pm-ecs.is-sync-locked .pm-ecs-masthead,
.pm-ecs.is-sync-locked .pm-crumb,
.pm-ecs.is-sync-locked .pm-banner {
  filter: grayscale(0.18) brightness(0.97);
  opacity: 0.55;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.pm-sync-lock {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.pm-sync-lock.is-active {
  display: flex;
  pointer-events: auto;
}
.pm-sync-lock-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 45%, rgba(255, 255, 255, 0.55), rgba(247, 248, 250, 0.28) 55%, transparent 75%);
  pointer-events: none;
}
.pm-sync-lock-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 14px;
  align-items: center;
  width: min(460px, calc(100vw - 48px));
  padding: 18px 18px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 48px rgba(15, 23, 42, 0.12),
    0 4px 12px rgba(15, 23, 42, 0.06);
  animation: pmSyncPanelIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: auto;
}
.pm-sync-lock-icon {
  grid-row: 1;
  grid-column: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #1677ff;
  background: #f0f6ff;
  border: 1px solid #d6e6ff;
}
.pm-sync-lock-icon svg {
  display: block;
  animation: pmSyncIconSpin 1.6s linear infinite;
  transform-origin: center;
}
.pm-sync-lock-body {
  grid-row: 1;
  grid-column: 2;
  min-width: 0;
  padding-top: 1px;
}
.pm-sync-lock-body strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #111827;
  line-height: 1.35;
  margin-bottom: 4px;
}
.pm-sync-lock-body p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pm-sync-cancel {
  grid-row: 1;
  grid-column: 3;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}
.pm-sync-cancel:disabled {
  opacity: 0.6;
  cursor: wait;
}
.pm-sync-progress {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  height: 2px;
  overflow: hidden;
  background: #eef2f7;
}
.pm-sync-progress i {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  background: linear-gradient(90deg, transparent, #1677ff 30%, #69b1ff 70%, transparent);
  animation: pmSyncBar 1.35s ease-in-out infinite;
}
@keyframes pmSyncPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pmSyncIconSpin {
  to { transform: rotate(360deg); }
}
@keyframes pmSyncBar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

@media (max-width: 560px) {
  .pm-sync-lock {
    align-items: flex-end;
    padding: 16px;
  }
  .pm-sync-lock-panel {
    width: 100%;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    animation-name: pmSyncPanelInMobile;
  }
  .pm-sync-cancel {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
  }
  .pm-sync-progress {
    grid-row: 3;
  }
  @keyframes pmSyncPanelInMobile {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

.pm-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}
.pm-pager-meta {
  font-size: 12px;
  color: #888;
  font-variant-numeric: tabular-nums;
}
.pm-pager .page-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .pm-ecs-shell {
    grid-template-columns: 1fr;
  }
  .pm-ecs-rail {
    position: static;
  }
  .pm-rail-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 4px;
  }
  .pm-rail-nav a {
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .pm-rail-nav a.active {
    border-bottom-color: var(--brand);
  }
  .pm-rail-sync {
    margin-top: 0;
  }
}

@media (max-width: 960px) {
  .pm-grid,
  .pm-kpi,
  .pm-info-grid {
    grid-template-columns: 1fr;
  }
  .pm-tile-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pm-hub-hero,
  .pm-ecs-masthead {
    padding: 16px;
  }
  .pm-ecs-masthead {
    flex-direction: column;
  }
  .pm-ecs-actions {
    width: 100%;
  }
  .pm-ecs-actions .btn {
    flex: 1;
  }
  .pm-filter,
  .pm-filter-grow {
    min-width: 100%;
  }
  .pm-filter .input {
    width: 100%;
  }
  .pm-section-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Task flow */
.task-flow-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted, #64748b);
  font-size: 13px;
}
.task-flow-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  animation: task-flow-pulse 1.4s ease-out infinite;
}
@keyframes task-flow-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.task-flow-panel .panel-head.task-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.task-flow-head h3 {
  margin: 0;
}
.task-flow-count {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted, #64748b);
  font-size: 13px;
}
.task-flow-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.task-flow-filters .input {
  min-width: 140px;
}
.task-flow-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.task-flow-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  table-layout: auto;
}
.task-flow-table th,
.task-flow-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}
.task-flow-table th {
  color: var(--muted, #64748b);
  font-weight: 600;
  white-space: nowrap;
  background: rgba(148, 163, 184, 0.06);
}
.task-flow-table .col-id { width: 64px; white-space: nowrap; }
.task-flow-table .col-task { width: 18%; min-width: 140px; }
.task-flow-table .col-type { width: 110px; white-space: nowrap; }
.task-flow-table .col-status { width: 88px; white-space: nowrap; }
.task-flow-table .col-source { width: 72px; white-space: nowrap; }
.task-flow-table .col-result {
  width: auto;
  min-width: 160px;
}
.task-flow-table .col-time { width: 148px; white-space: nowrap; }
.task-flow-table .col-ops {
  width: 1%;
  white-space: nowrap;
}
.task-flow-title {
  display: block;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-flow-id {
  margin-top: 4px;
  color: var(--muted, #94a3b8);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-flow-msg {
  color: var(--text, #334155);
  vertical-align: middle;
}
.task-flow-msg-wrap {
  min-width: 0;
  max-width: 100%;
}
.task-flow-msg-body {
  min-width: 0;
  max-height: calc(1.45em * 2);
  overflow: hidden;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.task-flow-msg-wrap.is-expanded .task-flow-msg-body {
  max-height: none;
  overflow: visible;
}
.task-flow-msg-text {
  line-height: 1.45;
}
.task-flow-msg-detail {
  margin-top: 2px;
  color: var(--muted, #94a3b8);
  font-size: 12px;
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.task-flow-msg-toggle {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary, #2563eb);
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}
.task-flow-msg-toggle:hover {
  text-decoration: underline;
}
.task-flow-msg-empty {
  color: var(--muted, #94a3b8);
}
.task-flow-empty {
  text-align: center;
  color: var(--muted, #64748b);
  padding: 36px 16px !important;
}
.task-flow-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
}
.task-flow-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--border, #e5e7eb);
  flex-wrap: wrap;
}
.task-flow-pager .pager-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.task-flow-pager .pager-ellipsis {
  color: var(--muted, #94a3b8);
  padding: 0 4px;
}

@media (max-width: 1100px) {
  .task-flow-table {
    min-width: 880px;
  }
}

@media (max-width: 960px) {
  .task-flow-table {
    min-width: 760px;
  }
  .task-flow-table th,
  .task-flow-table td {
    padding: 10px;
  }
  .task-flow-table .col-time {
    width: 126px;
    font-size: 12px;
  }
}

/* CDN create — flat console wizard */
.cdn-create-page {
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.cdn-create-page > .crumb { margin-bottom: 0; }
.cdn-create-empty {
  background: #fff;
  border: 1px solid #eceff3;
  padding: 48px 24px;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}
.cdn-create-empty strong {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.cdn-create-empty p {
  margin: 0 0 8px;
  color: #999;
  font-size: 12px;
}

.cdn-create-head { display: grid; }
.cdn-create-panel {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 18px 20px 16px;
  border: 1px solid #e6ebf2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #fff 100%),
    linear-gradient(135deg, #f7fafc 0%, #eef4fb 100%);
}
.cdn-create-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand);
}
.cdn-create-panel-copy { min-width: 0; }
.cdn-create-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #1f2a37;
}
.cdn-create-desc {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
  max-width: 640px;
}

.cdn-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #edf0f4;
}
.cdn-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px 0 0;
  color: #98a2b3;
}
.cdn-steps li + li {
  padding-left: 16px;
}
.cdn-steps li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  width: 1px;
  height: 18px;
  background: #e6ebf2;
}
.cdn-step-index {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #999;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
}
.cdn-step-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.cdn-step-copy strong {
  font-size: 13px;
  font-weight: 650;
  color: inherit;
  line-height: 1.3;
}
.cdn-step-copy em {
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: #98a2b3;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdn-steps li.is-active { color: #1f2a37; }
.cdn-steps li.is-active .cdn-step-index {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.cdn-steps li.is-active .cdn-step-copy strong { color: var(--brand); }
.cdn-steps li.is-done { color: #027a48; }
.cdn-steps li.is-done .cdn-step-index {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}
.cdn-steps li.is-done .cdn-step-copy strong { color: #027a48; }

.cdn-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.cdn-create-layout.is-success {
  grid-template-columns: minmax(0, 1fr);
}
.cdn-create-layout.is-success .cdn-create-side {
  display: none;
}
.cdn-create-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.cdn-create-panel-step { min-width: 0; }
.cdn-create-panel-step[hidden] { display: none !important; }

.cdn-create-card {
  background: #fff;
  border: 1px solid #eceff3;
  padding: 18px 20px 20px;
  display: grid;
  gap: 18px;
  min-width: 0;
}
.cdn-create-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cdn-create-card-head strong {
  font-size: 15px;
  font-weight: 650;
  color: #1f2a37;
}
.cdn-create-card-head .muted {
  font-size: 12px;
  color: #98a2b3;
}

.cdn-form-rows {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.cdn-form-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
}
.cdn-form-label { padding-top: 7px; }
.cdn-form-label-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
  line-height: 1.4;
}
.cdn-form-label-text em {
  font-style: normal;
  color: var(--danger);
  font-weight: 600;
}
.cdn-form-control {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.cdn-input {
  width: 100%;
  max-width: 480px;
  min-width: 0;
}
.cdn-form-hint {
  margin: 0;
  font-size: 12px;
  color: #98a2b3;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.cdn-form-hint.is-ok { color: var(--ok); }
.cdn-form-hint.is-error { color: var(--danger); }
.cdn-form-hint.is-pending { color: #b54708; }
.cdn-input.is-invalid { border-color: var(--danger); }
.cdn-input.is-valid { border-color: var(--ok); }

.cdn-cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 720px;
}
.cdn-cluster-card {
  appearance: none;
  display: grid;
  gap: 6px;
  align-content: center;
  text-align: left;
  min-width: 0;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid #dde3ec;
  border-radius: 0;
  background: #fff;
  color: #344054;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cdn-cluster-card strong {
  font-size: 13px;
  font-weight: 650;
  color: #1f2a37;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdn-cluster-card span {
  font-size: 12px;
  color: #98a2b3;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
}
.cdn-cluster-card:hover {
  border-color: #98b7f0;
  background: #f8fbff;
}
.cdn-cluster-card.is-active {
  border-color: var(--brand);
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px var(--brand);
}
.cdn-cluster-card.is-active strong { color: var(--brand); }
.cdn-cluster-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.cdn-cluster-empty {
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px dashed #e6ebf2;
  background: #fafbfc;
  color: #98a2b3;
  font-size: 12px;
}

.cdn-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 480px;
}
.cdn-choice-card {
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid #dde3ec;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  margin: 0;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cdn-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cdn-choice-card strong {
  font-size: 13px;
  font-weight: 650;
  color: #1f2a37;
  line-height: 1.3;
}
.cdn-choice-card span {
  font-size: 12px;
  color: #98a2b3;
  line-height: 1.45;
}
.cdn-choice-card:hover {
  border-color: #98b7f0;
  background: #f8fbff;
}
.cdn-choice-card:has(input:checked) {
  border-color: var(--brand);
  background: #f5f9ff;
  box-shadow: inset 0 0 0 1px var(--brand);
}
.cdn-choice-card:has(input:checked) strong { color: var(--brand); }

.cdn-choice-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 720px;
  width: 100%;
}
.cdn-kv-form .cdn-origin-host-value {
  display: grid;
  gap: 10px;
  align-items: stretch;
}
.cdn-kv-form .cdn-choice-grid {
  flex: 1 1 100%;
  max-width: 720px;
}
.cdn-origin-custom-host {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 720px;
  padding: 14px 16px;
  background: #f7f9fc;
  border: 1px solid #edf0f4;
  box-sizing: border-box;
}
.cdn-origin-custom-host[hidden] {
  display: none !important;
}
.cdn-origin-custom-field {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 520px;
  margin: 0;
  background: #fff;
  border: 1px solid #dde3ec;
  cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cdn-origin-custom-field:hover {
  border-color: #98b7f0;
}
.cdn-origin-custom-field:focus-within {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.cdn-origin-custom-prefix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 650;
  color: #667085;
  background: #f2f4f7;
  border-right: 1px solid #edf0f4;
  user-select: none;
}
.cdn-origin-custom-input,
.cdn-kv-form .cdn-origin-custom-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 34px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 34px;
}
.cdn-origin-custom-input:focus {
  outline: none;
  box-shadow: none;
}
.cdn-origin-custom-hint {
  margin: 0;
  font-size: 12px;
  color: #86909c;
  line-height: 18px;
}

.cdn-origin-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 12px 14px;
  background: #f7f9fc;
  border: 1px solid #edf0f4;
}
.cdn-origin-flow-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.cdn-origin-flow-item span {
  font-size: 11px;
  color: #98a2b3;
}
.cdn-origin-flow-item strong {
  font-size: 12px;
  font-weight: 600;
  color: #1f2a37;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdn-origin-flow-arrow {
  color: #c0c8d4;
  font-size: 14px;
  align-self: center;
  padding-top: 10px;
}
.cdn-origin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 96px;
  gap: 8px;
  align-items: center;
  max-width: 480px;
}
.cdn-origin-row .cdn-input { max-width: none; }
.cdn-origin-colon {
  color: #98a2b3;
  font-size: 14px;
  line-height: 1;
}

.cdn-create-success { gap: 16px; }
.cdn-success-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cdn-success-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ok);
  background: #edf9ed;
  border: 1px solid #c6e8c6;
}
.cdn-success-hero h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 650;
  color: #1f2a37;
}
.cdn-success-hero p {
  margin: 0;
  font-size: 13px;
  color: #667085;
  line-height: 1.55;
}
.cdn-dns-panel {
  border: 1px solid #d6e7ff;
  background: #f5f9ff;
  min-width: 0;
}
.cdn-dns-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #d6e7ff;
}
.cdn-dns-panel-head strong {
  font-size: 13px;
  font-weight: 650;
  color: #1f2a37;
}
.cdn-dns-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cdn-dns-table th,
.cdn-dns-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  word-break: break-all;
}
.cdn-dns-table th {
  color: #667085;
  font-weight: 500;
  background: transparent;
  border-bottom: 1px solid #e4eefb;
}
.cdn-dns-table td {
  color: #1f2a37;
  font-weight: 600;
}
.cdn-success-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cdn-success-meta > div {
  padding: 10px 12px;
  border: 1px solid #eceff3;
  background: #fafbfc;
  display: grid;
  gap: 4px;
  min-width: 0;
}
.cdn-success-meta span {
  font-size: 12px;
  color: #98a2b3;
}
.cdn-success-meta strong {
  font-size: 13px;
  color: #1f2a37;
  font-weight: 600;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.cdn-success-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cdn-create-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #eceff3;
}
.cdn-create-footer[hidden],
.cdn-create-footer .btn[hidden] {
  display: none !important;
}
.cdn-create-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.cdn-create-side {
  position: sticky;
  top: 16px;
  min-width: 0;
}
.cdn-create-summary {
  background: #fff;
  border: 1px solid #eceff3;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.cdn-create-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cdn-create-summary-head strong { font-size: 14px; }
.cdn-create-summary-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: #eff4ff;
  padding: 2px 8px;
}
.cdn-create-summary-list {
  margin: 0;
  display: grid;
  gap: 8px;
}
.cdn-create-summary-list > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  font-size: 12px;
}
.cdn-create-summary-list dt {
  margin: 0;
  color: #98a2b3;
}
.cdn-create-summary-list dd {
  margin: 0;
  color: #344054;
  word-break: break-word;
}
.cdn-create-notes {
  margin: 0;
  padding: 10px 0 0 16px;
  border-top: 1px solid #f0f2f5;
  color: #98a2b3;
  font-size: 11px;
  line-height: 1.55;
  display: grid;
  gap: 4px;
}

@media (max-width: 1100px) {
  .cdn-create-layout {
    grid-template-columns: 1fr;
  }
  .cdn-create-side { position: static; }
}

@media (max-width: 720px) {
  .cdn-form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cdn-form-label { padding-top: 0; }
  .cdn-cluster-grid,
  .cdn-choice-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .cdn-input,
  .cdn-origin-row { max-width: none; }
  .cdn-steps {
    grid-template-columns: 1fr;
  }
  .cdn-steps li,
  .cdn-steps li + li {
    padding: 10px 0 0;
  }
  .cdn-steps li + li::before {
    display: none;
  }
  .cdn-origin-flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cdn-origin-flow-arrow { display: none; }
  .cdn-success-meta { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cdn-create-desc { max-width: none; }
  .cdn-step-copy em { display: none; }
  .cdn-origin-row { grid-template-columns: 1fr; }
  .cdn-origin-colon { display: none; }
  .cdn-dns-table,
  .cdn-dns-table thead,
  .cdn-dns-table tbody,
  .cdn-dns-table th,
  .cdn-dns-table td,
  .cdn-dns-table tr { display: block; }
  .cdn-dns-table thead { display: none; }
  .cdn-dns-table td {
    padding: 6px 14px;
  }
  .cdn-dns-table td::before {
    content: attr(data-label);
    display: block;
    color: #667085;
    font-weight: 500;
    margin-bottom: 2px;
  }
}

.content-console:has(> .cdn-manage-page) {
  padding: 0;
}

/* CDN manage */
.console-page.cdn-manage-page,
.cdn-manage-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  min-width: 0;
  overflow: visible;
  box-sizing: border-box;
}
.cdn-manage-hero {
  background: #fff;
  border-bottom: 1px solid #e5e6eb;
  padding: 12px 20px 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cdn-manage-body {
  display: grid;
  gap: 12px;
  padding: 16px 20px 24px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.cdn-manage-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.cdn-manage-content[hidden] {
  display: none !important;
}
.cdn-manage-page.is-loading .cdn-manage-card:not([data-cdn-card-static]) > :not(.cdn-manage-card-head):not(.cdn-adv-head):not([data-cdn-card-loading]):not(input) {
  display: none !important;
}
.cdn-manage-page:not(.is-loading) [data-cdn-card-loading] {
  display: none !important;
}
.cdn-manage-card-loading {
  min-height: 160px;
  padding: 28px 16px;
}
.cdn-manage-page.is-loading .cdn-adv-switch {
  position: relative;
  pointer-events: none;
}
.cdn-manage-page.is-loading .cdn-adv-switch > * {
  visibility: hidden;
}
.cdn-manage-page.is-loading .cdn-adv-switch::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 0;
  width: 36px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: cdtShimmer 1.2s ease infinite;
}
.cdn-manage-card.cdn-manage-boot-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 280px;
  padding: 48px 20px;
  text-align: center;
}
.cdn-manage-boot-state[hidden] {
  display: none !important;
}
.cdn-manage-boot-error {
  margin: 0 0 4px;
  font-size: 13px;
  color: #c45656;
  line-height: 1.6;
  max-width: 480px;
}
.cdn-manage-error-panel {
  gap: 12px;
}
.cdn-manage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-width: 0;
  padding: 0 0 8px;
  box-sizing: border-box;
}
.cdn-manage-top-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.cdn-manage-titles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.cdn-manage-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #4e5969;
  flex-shrink: 0;
}
.cdn-manage-back:hover { color: var(--brand); background: var(--brand-soft); }
.cdn-manage-domain {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1d2129;
  letter-spacing: 0;
  line-height: 28px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cdn-manage-aliases {
  min-width: 0;
  color: #86909c;
  font-size: 12px;
  line-height: 20px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cdn-manage-top .status-dot {
  margin-left: 0;
  font-size: 13px;
  color: #4e5969;
  flex-shrink: 0;
  white-space: nowrap;
}
.cdn-manage-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  border-bottom: 0;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cdn-manage-tabs::-webkit-scrollbar { display: none; }
.cdn-manage-tab {
  position: relative;
  padding: 12px 16px 12px 0;
  font-size: 14px;
  color: #4e5969;
  line-height: 22px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cdn-manage-tab + .cdn-manage-tab {
  padding-left: 16px;
}
.cdn-manage-tab:hover { color: var(--brand); }
.cdn-manage-tab.is-active {
  color: var(--brand);
  font-weight: 600;
}
.cdn-manage-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
}
.cdn-manage-tab + .cdn-manage-tab.is-active::after {
  left: 16px;
}
.cdn-manage-pane {
  display: grid;
  gap: 12px;
  min-width: 0;
  width: 100%;
}
.cdn-manage-pane[hidden] { display: none !important; }
.cdn-manage-card {
  background: #fff;
  border: 1px solid #e5e6eb;
  padding: 20px 24px;
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.cdn-manage-card-head {
  display: grid;
  gap: 6px;
  padding-bottom: 4px;
}
.cdn-manage-card-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  line-height: 24px;
}
.cdn-manage-card-head p {
  margin: 0;
  font-size: 12px;
  color: #86909c;
  line-height: 20px;
}
.cdn-kv {
  margin: 8px 0 0;
}
.cdn-kv-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px 24px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid #f2f3f5;
}
.cdn-kv-row:last-child { border-bottom: 0; }
.cdn-kv dt,
.cdn-kv-label {
  padding-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: #86909c;
  line-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cdn-kv dd,
.cdn-kv-value {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
  font-size: 13px;
  color: #1d2129;
  line-height: 22px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cdn-kv-form .cdn-kv-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.cdn-kv-form .cdn-input,
.cdn-kv-form .cdn-textarea,
.cdn-kv-form .cdn-cert-list,
.cdn-kv-form .cdn-cert-tools {
  flex: 1 1 100%;
  max-width: none;
  width: 100%;
}
.cdn-kv-form .cdn-input-sm {
  flex: 0 0 auto;
  max-width: 180px;
}
.cdn-kv-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cdn-kv-edit .cdn-input-sm {
  width: 96px;
  max-width: 96px;
}
.cdn-inline-save-btn {
  color: var(--brand);
}
.cdn-inline-save-btn:hover {
  color: var(--brand);
  opacity: 0.85;
}
.cdn-inline-save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cdn-manage-page form.is-cdn-saving .cdn-inline-save-btn {
  pointer-events: none;
  opacity: 0.55;
}
.cdn-kv-form .cdn-kv-help {
  flex: 1 1 auto;
}
.cdn-kv-muted { color: #86909c; }
.cdn-kv-help {
  font-size: 12px;
  color: #86909c;
  line-height: 20px;
}
.cdn-info {
  display: inline-flex;
  color: #c0c4cc;
  cursor: help;
}
.cdn-info:hover { color: #86909c; }
.cdn-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: #86909c;
  cursor: pointer;
  flex-shrink: 0;
}
.cdn-icon-btn:hover { color: var(--brand); }
.cdn-icon-btn.is-copied { color: var(--ok); }
.cdn-manage-page form.is-cdn-saving .switch {
  pointer-events: none;
  opacity: 0.72;
}
.cdn-manage-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px -24px -20px;
  padding: 16px 24px 20px;
  border-top: 1px solid #f2f3f5;
}
.cdn-manage-coming {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 36px 0 48px;
  color: #86909c;
  font-size: 13px;
  text-align: left;
}
.cdn-manage-coming a { color: var(--brand); }
.cdn-origin-block {
  margin: 12px 0 8px;
  border: 1px solid #f2f3f5;
  min-width: 0;
}
.cdn-origin-subhead {
  padding: 10px 14px;
  background: #f7f8fa;
  color: #1d2129;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #f2f3f5;
}
.cdn-origin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cdn-origin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cdn-origin-table th,
.cdn-origin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f2f3f5;
  vertical-align: middle;
}
.cdn-origin-table th {
  color: #86909c;
  font-weight: 500;
  font-size: 12px;
  background: #fff;
}
.cdn-origin-table tbody tr:last-child td { border-bottom: 0; }
.cdn-origin-table .input,
.cdn-origin-table .select {
  min-width: 0;
  width: 100%;
}
.cdn-origin-table .cdn-origin-host { min-width: 160px; }
.cdn-origin-table .cdn-origin-request-host { min-width: 160px; }
.cdn-origin-table .cdn-origin-port,
.cdn-origin-table .cdn-origin-weight { width: 88px; }
.cdn-origin-empty td {
  padding: 28px 12px;
  color: #86909c;
  text-align: center;
}
.cdn-cache-pattern { min-width: 160px; }
.cdn-cache-ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cdn-cache-ttl-count {
  width: 72px;
  flex: 0 0 72px;
}
.cdn-cache-ttl-unit {
  width: 88px;
  flex: 0 0 88px;
}
.cdn-cache-task-tabs {
  display: flex;
  gap: 0;
  margin: 4px 0 0;
  border-bottom: 1px solid #f2f3f5;
}
.cdn-cache-task-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 16px 12px 0;
  margin: 0;
  font-size: 14px;
  color: #4e5969;
  line-height: 22px;
  cursor: pointer;
}
.cdn-cache-task-tab + .cdn-cache-task-tab {
  padding-left: 16px;
}
.cdn-cache-task-tab:hover { color: var(--brand); }
.cdn-cache-task-tab.is-active {
  color: var(--brand);
  font-weight: 600;
}
.cdn-cache-task-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
}
.cdn-cache-task-tab + .cdn-cache-task-tab.is-active::after {
  left: 16px;
}
.cdn-cache-task-panel {
  display: none;
  padding-top: 4px;
}
.cdn-cache-task-panel.is-active {
  display: block;
}
.cdn-cache-task-desc {
  margin: 14px 0 0;
  font-size: 12px;
  color: #86909c;
  line-height: 1.5;
}
.cdn-cache-task-pane-body {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.cdn-cache-task-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.cdn-cache-task-label {
  font-size: 13px;
  color: #86909c;
  line-height: 22px;
}
.cdn-cache-task-panel .cdn-choice-grid {
  max-width: 520px;
  width: 100%;
}
.cdn-cache-task-panel .cdn-textarea {
  min-height: 148px;
}
.cdn-cache-task-panel .cdn-kv-help {
  margin: 0;
}
.cdn-cache-task-panel.is-cdn-saving {
  pointer-events: none;
  opacity: 0.78;
}
.cdn-input-sm { max-width: 180px; }
.cdn-textarea,
textarea.input.cdn-textarea {
  width: 100%;
  max-width: 100%;
  min-height: 148px;
  height: auto;
  padding: 8px 10px;
  line-height: 1.5;
  font-family: var(--mono);
  font-size: 12px;
  resize: vertical;
}

.cdn-https-layout {
  display: grid;
  gap: 12px;
  min-width: 0;
  width: 100%;
}
.cdn-https-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.cdn-https-option {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #f2f3f5;
  background: #fafbfc;
}
.cdn-https-option-label {
  font-size: 13px;
  color: #4e5969;
  line-height: 22px;
}
.cdn-https-option-hint {
  font-size: 12px;
  color: #86909c;
  line-height: 18px;
}
.cdn-https-port,
.cdn-https-tls {
  width: 100%;
  max-width: 160px;
}
.cdn-adv-layout {
  display: grid;
  gap: 12px;
  min-width: 0;
  width: 100%;
}
.cdn-adv-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cdn-adv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.cdn-adv-head-text {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.cdn-adv-head-text h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  line-height: 24px;
}
.cdn-adv-head-text p {
  margin: 0;
  font-size: 12px;
  color: #86909c;
  line-height: 20px;
}
.cdn-adv-switch {
  margin-top: 1px;
}
.cdn-adv-more {
  margin-top: 16px;
  padding-top: 4px;
  border-top: 1px solid #f2f3f5;
}
.cdn-adv-rows {
  display: grid;
}
.cdn-adv-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 8px 24px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #f2f3f5;
}
.cdn-adv-row[hidden],
.cdn-adv-more[hidden] {
  display: none !important;
}
.cdn-adv-row:last-child {
  border-bottom: 0;
  padding-bottom: 8px;
}
.cdn-adv-row-label {
  font-size: 13px;
  color: #4e5969;
  line-height: 32px;
}
.cdn-adv-row-ctrl {
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
}
.cdn-adv-row-hint {
  font-size: 12px;
  color: #86909c;
  line-height: 18px;
}
.cdn-adv-qps {
  width: 120px;
  max-width: 100%;
}
.cdn-adv-size {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cdn-adv-size-count {
  width: 120px;
  max-width: 100%;
  flex: 0 0 120px;
}
.cdn-adv-size-unit {
  width: 88px;
  flex: 0 0 88px;
}
.cdn-adv-row-block .cdn-textarea {
  width: 100%;
  max-width: 640px;
  min-height: 96px;
  font-family: inherit;
}
.cdn-adv-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px -24px -20px;
  padding: 14px 24px 20px;
  border-top: 1px solid #f2f3f5;
}
.cdn-adv-foot .btn[hidden] {
  display: none !important;
}
.cdn-adv-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: #006eff;
  font-size: 13px;
  line-height: 22px;
  cursor: pointer;
}
.cdn-adv-more-btn::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}
.cdn-adv-more-btn.is-open::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}
.cdn-cert-list {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 14px 0 0;
}
.cdn-cert-list.is-empty {
  margin-bottom: 4px;
}
.cdn-cert-empty,
.cdn-cert-empty-panel {
  padding: 18px 16px;
  border: 1px dashed #e5e6eb;
  background: #fafbfc;
  color: #86909c;
  font-size: 13px;
  line-height: 22px;
}
.cdn-cert-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px 20px;
  padding: 16px 18px 16px 20px;
  border: 1px solid #d6e8ff;
  background: #f7fbff;
  min-width: 0;
}
.cdn-cert-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand);
}
.cdn-cert-card.is-warn {
  border-color: #ffe4b5;
  background: #fffbf2;
}
.cdn-cert-card.is-warn::before { background: #d48806; }
.cdn-cert-card.is-expired {
  border-color: #ffd6d6;
  background: #fff7f7;
}
.cdn-cert-card.is-expired::before { background: var(--danger); }
.cdn-cert-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: #00a700;
  background: #e8f8e8;
  white-space: nowrap;
}
.cdn-cert-card.is-ok .cdn-cert-badge,
.cdn-cert-card .cdn-cert-badge {
  color: #00a700;
  background: #e8f8e8;
}
.cdn-cert-card.is-warn .cdn-cert-badge {
  color: #d48806;
  background: #fff1d4;
}
.cdn-cert-card.is-expired .cdn-cert-badge {
  color: var(--danger);
  background: #ffe8e8;
}
.cdn-cert-card-body {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 8px;
}
.cdn-cert-card-body strong {
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
  line-height: 22px;
}
.cdn-cert-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
}
.cdn-cert-meta > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.cdn-cert-meta dt {
  font-size: 12px;
  color: #86909c;
  line-height: 18px;
  font-weight: 400;
}
.cdn-cert-meta dd {
  margin: 0;
  font-size: 13px;
  color: #1d2129;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.cdn-cert-edit {
  flex-shrink: 0;
  margin-left: auto;
}
.cdn-cert-sep {
  margin: 0 6px;
  color: #c9cdd4;
}
.cdn-cert-editor {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin-top: 14px;
}
.cdn-cert-editor[hidden] { display: none !important; }
.cdn-cert-name-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  max-width: 520px;
}
.cdn-cert-name-row .cdn-https-option-label {
  line-height: 32px;
}
.cdn-cert-picks {
  display: grid;
  border: 1px solid #f2f3f5;
  min-width: 0;
}
.cdn-cert-pick-row {
  display: grid;
  grid-template-columns: 88px auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #f2f3f5;
  min-width: 0;
}
.cdn-cert-pick-row:last-child { border-bottom: 0; }
.cdn-cert-pick-label {
  font-size: 13px;
  color: #4e5969;
  line-height: 22px;
}
.cdn-cert-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.cdn-cert-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.cdn-cert-field-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}
.cdn-cert-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #e5e6eb;
  background: #fff;
  color: #1d2129;
  font-size: 12px;
  line-height: 26px;
  cursor: pointer;
  white-space: nowrap;
}
.cdn-cert-pick:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.cdn-cert-pick input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.cdn-cert-pick-name {
  min-width: 0;
  color: #86909c;
  font-size: 12px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdn-cert-editor > .cdn-adv-more-btn {
  justify-self: start;
}
.cdn-cert-paste {
  min-width: 0;
}
.cdn-cert-paste[hidden] { display: none !important; }
.cdn-cert-textarea,
textarea.input.cdn-cert-textarea {
  min-height: 96px;
  font-family: var(--mono);
}

@media (max-width: 1080px) {
  .cdn-https-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .cdn-adv-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cdn-adv-row-label { line-height: 22px; }
  .cdn-kv-row,
  .cdn-kv-form .cdn-kv-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
  }
  .cdn-choice-grid-3 {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .cdn-cert-upload {
    grid-template-columns: 1fr;
  }
  .cdn-cert-name-row,
  .cdn-cert-pick-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cdn-cert-card {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .cdn-cert-edit {
    margin-left: 0;
  }
  .cdn-manage-hero { padding: 12px 16px 0; }
  .cdn-manage-body { padding: 16px; }
}
@media (max-width: 720px) {
  .cdn-manage-hero { padding: 12px 12px 0; }
  .cdn-manage-body { padding: 12px; }
  .cdn-manage-card { padding: 16px; }
  .cdn-manage-card-foot,
  .cdn-adv-foot {
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .cdn-https-options { grid-template-columns: 1fr; }
  .cdn-adv-head { gap: 16px; }
  .cdn-origin-table thead { display: none; }
  .cdn-origin-table,
  .cdn-origin-table tbody,
  .cdn-origin-table tr,
  .cdn-origin-table td {
    display: block;
    width: 100%;
  }
  .cdn-origin-table tr {
    padding: 12px 14px 8px;
    border-bottom: 1px solid #f2f3f5;
  }
  .cdn-origin-table tbody tr:last-child { border-bottom: 0; }
  .cdn-origin-table td {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border-bottom: 0;
  }
  .cdn-origin-table td::before {
    content: attr(data-label);
    color: #86909c;
    font-size: 12px;
    line-height: 32px;
  }
  .cdn-origin-table .cdn-origin-host,
  .cdn-origin-table .cdn-origin-request-host,
  .cdn-origin-table .cdn-origin-port,
  .cdn-origin-table .cdn-origin-weight { min-width: 0; width: 100%; }
  .cdn-cache-ttl { width: 100%; }
  .cdn-cache-ttl-count,
  .cdn-cache-ttl-unit { flex: 1 1 auto; width: auto; }
  .cdn-adv-size { width: 100%; }
  .cdn-adv-size-count,
  .cdn-adv-size-unit { flex: 1 1 auto; width: auto; }
  .cdn-origin-table td[data-label=""] {
    grid-template-columns: 1fr;
    justify-items: end;
  }
  .cdn-origin-table td[data-label=""]::before { display: none; }
  .cdn-origin-empty td {
    display: block;
    padding: 24px 12px;
    text-align: center;
  }
  .cdn-origin-empty td::before { content: none; }
}

/* DNS Hosting */
.dns-ns-host-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dns-ns-host-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
.dns-ns-host-item:has(input:checked) {
  border-color: #1d4ed8;
  background: #eff6ff;
}
.dns-manage-hero {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}
.dns-manage-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.dns-manage-title .console-title { margin: 0; }
.dns-manage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 6px;
  color: var(--muted, #64748b);
  font-size: 13px;
}
.dns-manage-page .console-toolbar-actions .btn {
  flex-shrink: 0;
}
.dns-record-toolbar-btns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#dns-record-table .col-check,
.dns-check-table .col-check {
  width: 40px;
  min-width: 40px;
  padding-left: 12px;
  padding-right: 4px;
  vertical-align: middle;
}
#dns-record-table tbody tr.is-selected td,
.dns-check-table tbody tr.is-selected td {
  background: #f0f7ff;
}
#dns-record-table tbody tr.is-selected:hover td,
.dns-check-table tbody tr.is-selected:hover td {
  background: #e8f3ff;
}
.dns-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.dns-check input {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.dns-check-box {
  width: 16px;
  height: 16px;
  border: 1px solid #c9d4e3;
  border-radius: 3px;
  background: #fff;
  position: relative;
  flex: 0 0 auto;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.dns-check:hover .dns-check-box {
  border-color: var(--brand, #006eff);
}
.dns-check input:checked + .dns-check-box,
.dns-check input:indeterminate + .dns-check-box {
  border-color: var(--brand, #006eff);
  background: var(--brand, #006eff);
}
.dns-check input:checked + .dns-check-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.dns-check input:indeterminate + .dns-check-box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 2px;
  background: #fff;
  border: 0;
  transform: none;
}
.dns-check input:focus-visible + .dns-check-box {
  box-shadow: 0 0 0 3px rgba(0, 110, 255, 0.16);
}
.dns-check:has(input:disabled) {
  cursor: not-allowed;
}
.dns-check input:disabled {
  cursor: not-allowed;
}
.dns-check input:disabled + .dns-check-box {
  background: #f5f6f8;
  border-color: #e5e6eb;
}
.dns-check:has(input:disabled):hover .dns-check-box {
  border-color: #e5e6eb;
}
.dns-manage-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: -4px 0 16px;
  padding: 0;
  border-bottom: 1px solid #e5e6eb;
  overflow-x: auto;
  scrollbar-width: none;
}
.dns-manage-tabs::-webkit-scrollbar { display: none; }
.dns-manage-tab {
  position: relative;
  padding: 10px 16px 12px 0;
  font-size: 14px;
  color: #4e5969;
  line-height: 22px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dns-manage-tab + .dns-manage-tab {
  padding-left: 16px;
}
.dns-manage-tab:hover { color: var(--brand); }
.dns-manage-tab.is-active {
  color: var(--brand);
  font-weight: 600;
}
.dns-manage-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
}
.dns-manage-tab + .dns-manage-tab.is-active::after {
  left: 16px;
}
.dns-manage-pane[hidden] { display: none !important; }
.dns-forward-table-wrap {
  position: relative;
}
.dns-forward-table-wrap.is-loading {
  min-height: 280px;
}
.dns-forward-table-wrap.is-loading .instance-table-scroll {
  min-height: 280px;
  overflow: hidden;
}
.dns-forward-table-wrap.is-loading [data-dns-forward-loading] {
  position: absolute;
  inset: 0;
  z-index: 4;
  min-height: 280px;
  background: #fff;
}
.dns-forward-table-wrap:not(.is-loading) [data-dns-forward-loading] {
  display: none !important;
}
.dns-forward-tip {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
}
.dns-ns-banner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  border-radius: 10px;
}
.dns-ns-banner strong {
  display: block;
  font-size: 13px;
  color: #1d2129;
}
.dns-ns-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dns-ns-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.dns-ns-host {
  min-width: 0;
  word-break: break-all;
  color: #4e5969;
  font-size: 13px;
  line-height: 1.4;
}
.dns-record-table-wrap {
  position: relative;
}
.dns-record-table-wrap.is-loading {
  min-height: 280px;
}
.dns-record-table-wrap.is-loading .instance-table-scroll {
  min-height: 280px;
  overflow: hidden;
}
.dns-record-loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  min-height: 280px;
  background: #fff;
}
.dns-record-table-wrap:not(.is-loading) .dns-record-loading {
  display: none !important;
}
.dns-search-wrap { position: relative; }
.dns-search-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 90;
  min-width: 220px;
  max-height: min(320px, 50vh);
  overflow: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid #e8e8e8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  padding: 4px 0;
}
.dns-search-suggest[hidden] { display: none !important; }
.dns-search-suggest-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #333;
}
.dns-search-suggest-item:hover,
.dns-search-suggest-item.is-active {
  background: #e8f3ff;
  color: var(--brand);
}
.dns-search-suggest-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.dns-search-suggest-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  word-break: break-all;
}
.dns-search-suggest-name mark {
  background: #fff3bf;
  color: inherit;
  padding: 0;
  font-weight: 700;
}
.dns-search-suggest-tag {
  flex-shrink: 0;
  font-size: 11px;
  color: #999;
  font-weight: 400;
}
.dns-search-suggest-item.is-active .dns-search-suggest-tag,
.dns-search-suggest-item:hover .dns-search-suggest-tag {
  color: var(--brand);
}
.dns-search-suggest-sub {
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dns-search-suggest-empty {
  padding: 12px;
  font-size: 13px;
  color: #999;
  text-align: center;
}
.dns-record-editor { background: #f8fafc; }
.dns-record-editor td { vertical-align: middle; }
.dns-record-editor .input,
.dns-record-editor .select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.dns-record-value-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 160px;
}
.dns-record-priority { width: 72px; flex: 0 0 72px; }
#dns-record-table .dns-record-value-td {
  white-space: normal;
  min-width: 200px;
  max-width: 420px;
  width: 38%;
}
.dns-record-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.dns-record-value-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.45;
  font-family: var(--mono);
  font-size: 12px;
}
.dns-record-value.is-expanded .dns-record-value-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.dns-record-value-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}
.dns-record-value-toggle:hover { text-decoration: underline; }
.dns-record-value-toggle[hidden] { display: none !important; }
@media (max-width: 720px) {
  .dns-manage-hero { margin-bottom: 12px; }
  .dns-manage-page .console-toolbar {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  .dns-manage-page .console-toolbar-actions {
    display: contents;
  }
  .dns-manage-page .console-search {
    min-width: 0;
  }
  .dns-manage-page .console-search .input {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 420px) {
  .dns-manage-page .console-toolbar {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .dns-manage-page .console-toolbar #dns-record-type-filter {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 560px) {
  .cdn-manage-hero { padding: 10px 12px 0; }
  .cdn-manage-tab { padding: 10px 12px; }
  .cdn-manage-body { padding: 12px; }
  .cdn-cert-name-row { max-width: none; }
}