/* ============================================================
   CDN 一键开通 / 站点列表 / 站点详情（对齐已确认原型）
   ============================================================ */

/* ---------- 列表 ---------- */

.cdn-filter-bar .search-field { width: min(320px, 100%); }
.cdn-filter-bar .search-field .input { width: 100%; padding-left: 31px; }
.cdn-filter-bar .filter-label { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

#cdnSiteTable { min-width: 1120px; table-layout: fixed; }
#cdnSiteTable th,
#cdnSiteTable td { padding-left: 10px; padding-right: 10px; }
#cdnSiteTable th:nth-child(1) { width: 11.5%; }
#cdnSiteTable th:nth-child(2) { width: 15.5%; }
#cdnSiteTable th:nth-child(3) { width: 6%; }
#cdnSiteTable th:nth-child(4) { width: 13.5%; }
#cdnSiteTable th:nth-child(5) { width: 10.5%; }
#cdnSiteTable th:nth-child(6) { width: 12%; }
#cdnSiteTable th:nth-child(7) { width: 7.5%; }
#cdnSiteTable th:nth-child(8) { width: 7.5%; }
#cdnSiteTable th:nth-child(9) { width: 7%; }
#cdnSiteTable th:nth-child(10) { width: 9%; }
#cdnSiteTable td:nth-child(1) { overflow: hidden; }
#cdnSiteTable td:nth-child(1) .cell-main { font-family: var(--mono); font-size: 11px; letter-spacing: -.01em; }
#cdnSiteTable td:nth-child(1) .cell-sub { font-size: 10.5px; }
#cdnSiteTable td:nth-child(2) .cell-main { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cdnSiteTable td:nth-child(5) > .mono { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
#cdnSiteTable td:nth-child(4) .cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#cdnSiteTable td:nth-child(6) .cell-sub { font-size: 10.5px; }
#cdnSiteTable td:nth-child(7) { white-space: nowrap; font-size: 11.5px; }
#cdnSiteTable td:nth-child(8) { white-space: nowrap; font-size: 11px; }
#cdnSiteTable td:nth-child(9) { white-space: nowrap; }
#cdnSiteTable td.actions .btn { padding-left: 8px; padding-right: 8px; }
#cdnSiteTable .cell-main { font-weight: 400; color: var(--ink); }
#cdnSiteTable .cell-sub { margin-top: 3px; font-size: 11px; line-height: 1.45; }
#cdnSiteTable .cell-sub { margin-top: 3px; font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
#cdnSiteTable .domain-cell { display: flex; align-items: center; gap: 5px; min-width: 0; }
#cdnSiteTable .domain-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cdnSiteTable .ssl-mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-strong);
  flex: none;
}
#cdnSiteTable .ssl-mark .icon { width: 10px; height: 10px; }
#cdnSiteTable .access-line { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; }
#cdnSiteTable .access-line .tag { height: 19px; font-size: 10px; padding: 0 5px; white-space: nowrap; flex: none; }
#cdnSiteTable .actions { text-align: right; white-space: nowrap; }

.live-pill {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 9.5px;
  font-weight: 550;
  letter-spacing: .02em;
  vertical-align: 1px;
}
.quota-line { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.quota-line .progress { flex: 1; min-width: 0; }
.quota-pct { font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quota-pct.is-good { color: var(--good-ink); }
.quota-pct.is-warn { color: var(--warn-ink); }
.quota-pct.is-fast { color: #b05a00; }
.quota-pct.is-critical { color: var(--critical); }
.quota-pct.is-over { color: var(--critical-ink); }
.quota-pct.is-muted { color: var(--ink-3); }
.progress { position: relative; height: 6px; background: var(--surface-sunken); border-radius: 3px; overflow: visible; }
.progress > span { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.progress > span.is-good { background: var(--good); }
.progress > span.is-warn { background: var(--warn); }
.progress > span.is-danger { background: var(--critical); }
.progress > span.is-over { background: var(--critical-ink); }
.progress > span.is-muted { background: var(--ink-4); }
.progress .time-mark { position: absolute; top: -2px; width: 2px; height: 10px; background: var(--ink-2); border-radius: 1px; opacity: .7; }
.progress-lg { height: 9px; }
.progress-lg > span { border-radius: 4px; }
.progress-lg .time-mark { top: -3px; height: 15px; }
.risk-mini { width: 13px; height: 13px; }
.risk-mini.is-critical, .risk-mini.is-over { color: var(--critical); }

/* 排序表头 */
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  white-space: nowrap;
  vertical-align: middle;
}
.sort-btn:hover { color: var(--ink); }
.sort-btn.is-active { color: var(--brand-strong); }
.sort-btn-sub { font-weight: 400; color: var(--ink-3); }
.sort-btn-sub:hover { color: var(--ink-2); }
.sort-btn-sub.is-active { color: var(--brand-strong); }
.sort-marks { display: inline-flex; flex-direction: column; gap: 2px; flex: none; }
.sort-marks i { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; }
.sort-marks .up { border-bottom: 5px solid var(--ink-4); }
.sort-marks .down { border-top: 5px solid var(--ink-4); }
.sort-btn:hover .sort-marks .up { border-bottom-color: var(--ink-3); }
.sort-btn:hover .sort-marks .down { border-top-color: var(--ink-3); }
.sort-btn.is-asc .sort-marks .up { border-bottom-color: var(--brand); }
.sort-btn.is-desc .sort-marks .down { border-top-color: var(--brand); }
.quota-th { font-size: 10px; }
.quota-sort-wrap { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; white-space: nowrap; }
.quota-sort-sep { color: var(--ink-4); font-weight: 400; }
.quota-sort-marks { margin-left: 2px; }
.quota-sort-marks.is-asc .up { border-bottom-color: var(--brand); }
.quota-sort-marks.is-desc .down { border-top-color: var(--brand); }

/* ---------- 健康度卡片 ---------- */

.health-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.health-badge.is-good { background: #eafaf1; color: var(--good-ink); }
.health-badge.is-warn { background: #fff8e1; color: var(--warn-ink); }
.health-badge.is-fast { background: #fff3e0; color: #b05a00; }
.health-badge.is-danger { background: #fdecea; color: var(--critical-ink); }
.health-badge.is-muted { background: var(--surface-sunken); color: var(--ink-3); }
.health-numbers { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; flex-wrap: wrap; }
.health-pct { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.health-pct.is-good { color: var(--good-ink); }
.health-pct.is-warn { color: var(--warn-ink); }
.health-pct.is-fast { color: #b05a00; }
.health-pct.is-critical, .health-pct.is-over { color: var(--critical-ink); }
.health-pct.is-muted { color: var(--ink-3); }
.health-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.health-foot .forecast { color: var(--ink-2); font-weight: 500; }

/* ---------- 一键开通 ---------- */

.wizard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.wizard-main { min-width: 0; }
.wizard-card { padding: 0; overflow: hidden; }
.wizard-section { padding: 18px 20px; border-top: 1px solid var(--line); }
.wizard-section:first-child { border-top: 0; }
.section-title { font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.section-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.55; }
.subhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.advanced { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sub); }
.advanced > summary { padding: 9px 12px; cursor: pointer; font-size: 12px; font-weight: 550; color: var(--ink-2); list-style: none; }
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: "▸"; display: inline-block; margin-right: 6px; color: var(--ink-4); transition: transform .12s; }
.advanced[open] > summary::before { transform: rotate(90deg); }
.advanced > .form-grid, .advanced > .table-wrap { padding: 0 12px 12px; }
.wizard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-sub); }
.wizard-progress { font-size: 11.5px; color: var(--ink-3); }
.summary-card { position: sticky; top: 16px; }
.summary-list { display: flex; flex-direction: column; }
.summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 11.5px; }
.summary-row:last-child { border-bottom: 0; }
.summary-row .k { color: var(--ink-3); white-space: nowrap; }
.summary-row .v { text-align: right; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.cname-card { border: 1px solid var(--brand-line); border-radius: var(--r-sm); background: var(--brand-soft); padding: 12px 14px; }
.cname-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-strong); font-weight: 600; }
.cname-value { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; font-family: var(--mono); font-size: 12px; color: var(--brand-strong); font-weight: 600; }
.tls-options { display: flex; flex-wrap: wrap; gap: 6px; }
.tls-options label { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.tls-options label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.tls-options input { accent-color: var(--brand); }
.readonly-value { display: flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sub); color: var(--ink-3); font-size: 12.5px; }
.cache-scope.is-readonly { opacity: .55; pointer-events: none; }
#cdnHttpsBody.is-off .form-grid,
#cdnHttpsBody.is-off .switch-row { pointer-events: none; }
.cache-source-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cache-inherit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cache-inherit-item { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sub); padding: 8px 10px; min-width: 0; }
.cache-inherit-item .k { font-size: 10.5px; color: var(--ink-3); }
.cache-inherit-item .v { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* 开通结果 */
.result-wrap { max-width: 760px; margin: 48px auto; }
.result-card { padding: 28px 30px; text-align: center; }
.result-icon { width: 54px; height: 54px; border-radius: 50%; background: #eafaf1; color: var(--good-ink); display: inline-flex; align-items: center; justify-content: center; }
.result-icon .icon { width: 26px; height: 26px; }
.result-title { font-size: 20px; font-weight: 650; margin-top: 10px; }
.result-sub { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; text-align: left; }
.result-item { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; min-width: 0; }
.result-item .k { font-size: 10.5px; color: var(--ink-3); }
.result-item .v { font-size: 12px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }
.result-next { text-align: left; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sub); }
.result-next-title { font-size: 12px; font-weight: 650; margin-bottom: 7px; }
.result-next ol { list-style: decimal; padding-left: 18px; font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.result-actions { display: flex; justify-content: center; gap: 8px; margin-top: 22px; flex-wrap: wrap; }

/* ---------- 详情 ---------- */

.detail-title { font-size: 21px; font-weight: 650; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 14px 0 16px; overflow-x: auto; scrollbar-width: none; }
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tabs .tab-btn {
  position: relative;
  height: 38px;
  padding: 0 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--ink-3);
  font-size: 12.5px;
  white-space: nowrap;
}
.detail-tabs .tab-btn:hover { color: var(--ink); }
.detail-tabs .tab-btn.is-active { color: var(--brand-strong); border-bottom-color: var(--brand); font-weight: 600; }
.detail-tabs .tab-btn .count { margin-left: 5px; font-size: 10.5px; color: var(--ink-4); }
.detail-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.detail-panel-grid .span-2 { grid-column: 1 / -1; }
.detail-panel-grid .span-3 { grid-column: 1 / -1; }
.traffic-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.traffic-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.traffic-summary .item { background: var(--surface); padding: 10px 12px; }
.traffic-summary .k { font-size: 10.5px; color: var(--ink-3); }
.traffic-summary .v { font-size: 18px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.traffic-chart-wrap { position: relative; margin-top: 14px; }
.traffic-chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.traffic-chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 12px; background: rgba(255, 255, 255, .7); }
.traffic-table-wrap { max-height: 440px; overflow: auto; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.traffic-table-wrap .data th { position: sticky; top: 0; z-index: 1; }

/* ---------- API 导入 ---------- */

.mapping-table td, .mapping-table th { font-size: 11.5px; }
.mapping-table td.mono { font-family: var(--mono); font-size: 11px; }
.import-note { margin-top: 14px; }

@media (max-width: 1280px) {
  .wizard-layout { grid-template-columns: minmax(0, 1fr); }
  .summary-card { position: static; }
  .cache-inherit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traffic-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .detail-panel-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-panel-grid .span-2 { grid-column: auto; }
  .cache-inherit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .stat-strip.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip.cols-4 .stat:nth-child(2) { border-right: 0; }
  .stat-strip.cols-4 .stat:nth-child(3),
  .stat-strip.cols-4 .stat:nth-child(4) { border-top: 1px solid var(--line); }
  .wizard-section { padding: 15px 14px; }
  .wizard-foot { padding: 12px 14px; flex-wrap: wrap; }
  .wizard-progress { display: none; }
  .cache-inherit-grid { grid-template-columns: minmax(0, 1fr); }
  .result-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-title { font-size: 18px; }
  .traffic-summary { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   CDN 页面视觉对齐已确认原型（仅作用于 .cdn-page，不影响其他页面）
   ============================================================ */

.cdn-page {
  --ink-4: #8a99a3;
  --good-soft: #e9f7e9;
  --warn: #b77900;
  --warn-ink: #8a5a00;
  --warn-soft: #fff5dd;
  --fast: #c2610a;
  --fast-ink: #9a4d08;
  --fast-soft: #fbeee1;
  --critical: #c53030;
  --critical-ink: #9b1c1c;
  --critical-soft: #fdecec;
  --info: #2a78d6;
  --info-soft: #eaf2fd;
  --shadow: 0 1px 2px rgba(16, 27, 35, .05), 0 10px 30px rgba(16, 27, 35, .045);
}

.cdn-page .page-head { align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.cdn-page .crumb { gap: 7px; margin-bottom: 7px; font-size: 11.5px; }
.cdn-page .page-title { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.cdn-page .page-sub { margin-top: 7px; font-size: 12.5px; }
.cdn-page .head-actions { gap: 8px; }

.cdn-page .btn {
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
}
.cdn-page .btn:hover:not(:disabled) { background: var(--surface-sub); border-color: var(--line-strong); color: var(--ink); }
.cdn-page .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.cdn-page .btn-primary:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.cdn-page .btn-outline { background: var(--surface); border-color: var(--line-strong); }
.cdn-page .btn-ghost { border-color: transparent; background: transparent; }
.cdn-page .btn-ghost:hover:not(:disabled) { background: var(--surface-sunken); border-color: transparent; }
.cdn-page .btn-danger { color: var(--critical); border-color: #efc4c4; background: #fff; }
.cdn-page .btn-danger:hover:not(:disabled) { background: var(--critical-soft); }
.cdn-page .btn-sm { height: 28px; padding: 0 9px; font-size: 11.5px; border-radius: var(--r-xs); }
.cdn-page .btn-sm .icon { width: 13px; height: 13px; }

.cdn-page .tag {
  height: 21px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
}
.cdn-page .tag-good { background: var(--good-soft); color: var(--good-ink); }
.cdn-page .tag-warn { background: var(--warn-soft); color: var(--warn-ink); }
.cdn-page .tag-critical,
.cdn-page .tag-danger { background: var(--critical-soft); color: var(--critical-ink); }
.cdn-page .tag-info { background: var(--info-soft); color: var(--info); }
.cdn-page .tag-brand { background: var(--brand-soft); color: var(--brand-strong); }
.cdn-page .tag-muted { background: var(--surface-sunken); color: var(--ink-3); }

.cdn-page .panel { box-shadow: var(--shadow); }
.cdn-page .panel-head { padding: 15px 17px; border-bottom-color: var(--line-soft); }
.cdn-page .panel-title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.cdn-page .panel-sub { margin-top: 4px; font-size: 11.5px; }
.cdn-page .panel-body { padding: 17px; }
.cdn-page .panel-body.flush { padding: 0; }
.cdn-page .panel-note { padding: 9px 11px; border: 0; background: var(--surface-sub); font-size: 11.5px; }
.cdn-page .panel-note.is-brand { background: var(--brand-soft); }
.cdn-page .panel-note .icon { width: 15px; height: 15px; }

.cdn-page .stat-strip,
.cdn-page .stat-strip.cols-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.cdn-page .stat {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.cdn-page .stat:last-child { border-right: 1px solid var(--line); }
.cdn-page .stat-label { font-size: 11.5px; }
.cdn-page .stat-line { margin-top: 7px; padding-right: 0; }
.cdn-page .stat-value { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.cdn-page .stat-foot { margin-top: 7px; font-size: 11px; }
.cdn-page .stat-foot strong { color: var(--good-ink); font-weight: 600; }

.cdn-page .data { font-size: 12.5px; }
.cdn-page .data th { padding: 9px 13px; font-size: 11px; }
.cdn-page .data td { padding: 11px 13px; vertical-align: middle; }
.cdn-page .data tbody tr:hover { background: #fbfcfd; }
.cdn-page .data .num { text-align: right; }
.cdn-page .data .actions { text-align: right; white-space: nowrap; }

.cdn-page .filter-bar { padding: 11px 14px; border-bottom-color: var(--line-soft); }
.cdn-page .filter-bar .search-field { width: min(320px, 100%); }
.cdn-page .filter-bar .input,
.cdn-page .filter-bar .select { width: auto; min-width: 120px; }
.cdn-page .result-count { font-size: 11.5px; }
.cdn-page .cdn-pager { padding: 12px 14px; border-top: 1px solid var(--line-soft); }
.cdn-page .pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 11.5px; }
.cdn-page .page-btn { height: 27px; min-width: 27px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; }

.cdn-page .live-pill {
  height: 16px;
  padding: 0 5px;
  gap: 3px;
  background: var(--good-soft);
  color: var(--good-ink);
  font-size: 9.5px;
  font-weight: 500;
  vertical-align: 2px;
}
.cdn-page .live-pill::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--good); }
.cdn-page #cdnSiteTable .ssl-mark {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 4px;
  background: var(--good-soft);
  color: var(--good-ink);
  vertical-align: 1px;
}
.cdn-page #cdnSiteTable .ssl-mark .icon { width: 11px; height: 11px; }
.cdn-page .progress { height: 6px; border-radius: 999px; overflow: hidden; }
.cdn-page .progress > span { border-radius: inherit; }
.cdn-page .progress > span.is-fast { background: var(--fast); }
.cdn-page .progress > span.is-critical { background: var(--critical); }
.cdn-page .progress .time-mark { top: 0; bottom: 0; height: auto; width: 1px; background: #4a5964; box-shadow: 0 0 0 1px rgba(255, 255, 255, .65); opacity: 1; }
.cdn-page .progress-lg { height: 12px; border-radius: 6px; margin-top: 8px; }
.cdn-page .progress-lg .time-mark { width: 2px; }

.cdn-page .health-badge { height: 22px; padding: 0 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 600; }
.cdn-page .health-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cdn-page .health-badge.is-good { background: var(--good-soft); color: var(--good-ink); }
.cdn-page .health-badge.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.cdn-page .health-badge.is-fast { background: var(--fast-soft); color: var(--fast-ink); }
.cdn-page .health-badge.is-critical,
.cdn-page .health-badge.is-over { background: var(--critical-soft); color: var(--critical-ink); }
.cdn-page .health-badge.is-muted { background: var(--surface-sunken); color: var(--ink-3); }
.cdn-page .health-pct { font-size: 23px; font-weight: 700; line-height: 1; }
.cdn-page .health-numbers { gap: 10px; margin-bottom: 0; }
.cdn-page .health-foot { margin-top: 6px; font-size: 11px; }

.cdn-page .section-title { font-size: 13px; font-weight: 700; }
.cdn-page .section-sub { margin-top: 4px; font-size: 11.5px; }
.cdn-page .wizard-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; }
.cdn-page .wizard-section { padding: 17px; border-top: 0; border-bottom: 1px solid var(--line-soft); }
.cdn-page .wizard-section:last-of-type { border-bottom: 0; }
.cdn-page .wizard-foot { position: sticky; bottom: 0; z-index: 5; padding: 13px 17px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .96); box-shadow: 0 -8px 18px rgba(16, 27, 35, .05); }
.cdn-page .wizard-progress { flex: 1; font-size: 11.5px; }
.cdn-page .summary-card { top: 80px; }
.cdn-page .summary-row { padding: 8px 0; font-size: 12px; }
.cdn-page .section-title .tag { vertical-align: 1px; }

.cdn-page .detail-head { align-items: flex-start; margin-bottom: 14px; }
.cdn-page .detail-title { font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.cdn-page .detail-meta { gap: 7px 14px; margin-top: 8px; font-size: 11.5px; }
.cdn-page .detail-meta .mono { font-size: 11.5px; }
.cdn-page .detail-tabs { margin: 0 0 16px; }
.cdn-page .detail-tabs .tab-btn {
  position: relative;
  height: 37px;
  padding: 0 12px;
  border: 0;
  font-size: 12.5px;
}
.cdn-page .detail-tabs .tab-btn.is-active { border-bottom-color: transparent; }
.cdn-page .detail-tabs .tab-btn.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}
.cdn-page .detail-panel-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.cdn-page .detail-panel-grid > .col-4 { grid-column: span 4; }
.cdn-page .detail-panel-grid > .col-8 { grid-column: span 8; }
.cdn-page .detail-panel-grid > .col-12 { grid-column: span 12; }
.cdn-page .detail-panel-grid > .span-2,
.cdn-page .detail-panel-grid > .span-3 { grid-column: span 12; }
.cdn-page .kv-row { padding: 9px 0; font-size: 12px; }

.cdn-page .result-wrap { margin-top: 24px; }
.cdn-page .result-card { padding: 34px 28px 26px; }
.cdn-page .result-title { font-size: 22px; font-weight: 700; }
.cdn-page .result-sub { margin-top: 7px; font-size: 12.5px; }
.cdn-page .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--line); }
.cdn-page .result-item { padding: 12px 14px; border: 0; border-radius: 0; background: var(--surface); }
.cdn-page .result-item .k { font-size: 10.5px; }
.cdn-page .result-item .v { margin-top: 4px; font-size: 12.5px; }
.cdn-page .result-next { border-radius: var(--r-md); background: var(--surface-sub); }
.cdn-page .result-next ol { margin-top: 9px; font-size: 11.5px; line-height: 1.8; }

@media (max-width: 1120px) {
  .cdn-page .wizard-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .cdn-page .detail-panel-grid > .col-4,
  .cdn-page .detail-panel-grid > .col-8 { grid-column: span 6; }
}
@media (max-width: 900px) {
  .cdn-page .stat-strip,
  .cdn-page .stat-strip.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdn-page .stat:nth-child(2) { border-right: 1px solid var(--line); }
  .cdn-page .wizard-layout { grid-template-columns: minmax(0, 1fr); }
  .cdn-page .summary-card { position: static; top: auto; }
  .cdn-page .detail-head { flex-direction: column; }
  .cdn-page .detail-head .head-actions { justify-content: flex-start; }
  .cdn-page .detail-panel-grid > .col-4,
  .cdn-page .detail-panel-grid > .col-8,
  .cdn-page .detail-panel-grid > .col-12 { grid-column: span 12; }
  .cdn-page .result-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .cdn-page .page-head { flex-direction: column; }
  .cdn-page .head-actions { justify-content: flex-start; }
  .cdn-page .filter-bar .input,
  .cdn-page .filter-bar .select,
  .cdn-page .filter-bar .search-field { width: 100%; }
  .cdn-page .result-card { padding: 26px 18px 20px; }
}
.cdn-page .legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-3); font-size: 11px; }
.cdn-page .legend span { display: inline-flex; align-items: center; gap: 5px; }
.cdn-page .legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.cdn-page .legend i.alt { background: var(--info); }
.cdn-page .chart-legend { gap: 14px; font-size: 11px; color: var(--ink-3); }
.cdn-page .page-btns .page-btn:first-child,
.cdn-page .page-btns .page-btn:last-child {
  width: 27px;
  min-width: 27px;
  padding: 0;
  font-size: 0;
}
.cdn-page .page-btns .page-btn:first-child::before { content: "‹"; font-size: 15px; line-height: 1; }
.cdn-page .page-btns .page-btn:last-child::after { content: "›"; font-size: 15px; line-height: 1; }
.cdn-page .wizard-card { overflow: hidden; }
.cdn-page .detail-panel-grid > .col-5 { grid-column: span 5; }
.cdn-page .detail-panel-grid > .col-7 { grid-column: span 7; }
@media (max-width: 1120px) {
  .cdn-page .detail-panel-grid > .col-5,
  .cdn-page .detail-panel-grid > .col-7 { grid-column: span 12; }
}
.cdn-page .health-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; color: var(--ink-3); font-size: 10px; }
.cdn-page .health-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cdn-page .health-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.cdn-page .health-legend i.marker { width: 1px; height: 9px; border-radius: 0; background: #4a5964; box-shadow: 0 0 0 1px rgba(255, 255, 255, .65); }
.cdn-page .health-legend i.warn { background: var(--warn); }
.cdn-page .health-legend i.fast { background: var(--fast); }
.cdn-page .health-legend i.bad { background: var(--critical); }
.cdn-page .detail-panel-grid > .col-6 { grid-column: span 6; }
@media (max-width: 900px) {
  .cdn-page .detail-panel-grid > .col-6 { grid-column: span 12; }
}
.cdn-page .switch:has(input:checked) { background: var(--brand); }
.cdn-page .switch:has(input:checked)::after { transform: translateX(14px); }
.cdn-page .health-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 5px; vertical-align: 1px; }
.cdn-page .health-dot.warn { background: var(--warn); }
.cdn-page .health-dot.bad { background: var(--critical); }