/* === Channel monitor: ported platform status UI === */

.console-monitor,
.channel-monitor-models-modal {
  --cm-page: #f4f6fa;
  --cm-glass-nav: rgba(255, 255, 255, 0.82);
  --cm-glass-card: rgba(255, 255, 255, 0.75);
  --cm-glass-hover: rgba(255, 255, 255, 0.94);
  --cm-glass-inner: rgba(246, 248, 252, 0.8);
  --cm-glass-pill: rgba(0, 0, 0, 0.05);
  --cm-glass-pill-hover: rgba(0, 0, 0, 0.08);
  --cm-glass-border: rgba(255, 255, 255, 0.9);
  --cm-border-subtle: rgba(0, 0, 0, 0.06);
  --cm-text: #1d1d1f;
  --cm-text-2: #515154;
  --cm-text-3: #727278;
  --cm-countdown: #1d1d1f;
  --cm-countdown-bg: rgba(0, 0, 0, 0.12);
  --cm-countdown-tag: rgba(0, 0, 0, 0.06);
  --cm-green: #34c759;
  --cm-yellow: #ff9f0a;
  --cm-red: #ff3b30;
  --cm-unknown: #a1a1aa;
  --cm-openai: #10a37f;
  --cm-claude: #d97706;
  --cm-gemini: #1a73e8;
  --cm-deepseek: #0284c7;
  --cm-grok: #18181b;
  --cm-domestic: #8b5cf6;
  --cm-accent: #0071e3;
  --cm-transition: 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.console-view[data-view-panel="channel-status"] {
  background-color: var(--cm-page) !important;
  background-image: radial-gradient(circle at 50% 0%, rgba(0, 113, 227, 0.06) 0%, transparent 60%) !important;
  background-attachment: fixed;
}

html.portal-theme-dark .console-monitor,
html.portal-theme-dark .channel-monitor-models-modal,
html.dark .console-monitor,
html.dark .channel-monitor-models-modal,
html[data-theme="dark"] .console-monitor,
html[data-theme="dark"] .channel-monitor-models-modal {
  --cm-page: #090a0f;
  --cm-glass-nav: rgba(22, 24, 32, 0.78);
  --cm-glass-card: rgba(22, 24, 32, 0.68);
  --cm-glass-hover: rgba(28, 31, 42, 0.88);
  --cm-glass-inner: rgba(14, 15, 20, 0.65);
  --cm-glass-pill: rgba(255, 255, 255, 0.08);
  --cm-glass-pill-hover: rgba(255, 255, 255, 0.14);
  --cm-glass-border: rgba(255, 255, 255, 0.1);
  --cm-border-subtle: rgba(255, 255, 255, 0.06);
  --cm-text: #ffffff;
  --cm-text-2: rgba(255, 255, 255, 0.7);
  --cm-text-3: rgba(255, 255, 255, 0.52);
  --cm-countdown: #ffffff;
  --cm-countdown-bg: rgba(255, 255, 255, 0.2);
  --cm-countdown-tag: rgba(255, 255, 255, 0.12);
  --cm-green: #30d158;
  --cm-yellow: #ffd60a;
  --cm-red: #ff453a;
  --cm-unknown: #71717a;
  --cm-grok: #ffffff;
  --cm-accent: #64a8ff;
}

html.portal-theme-dark .console-view[data-view-panel="channel-status"],
html.dark .console-view[data-view-panel="channel-status"],
html[data-theme="dark"] .console-view[data-view-panel="channel-status"] {
  background-color: var(--cm-page) !important;
  background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%) !important;
}

.console-monitor .console-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: 24px !important;
  gap: 20px !important;
}

.channel-monitor-system-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--cm-glass-border);
  border-radius: 16px;
  padding: 12px 20px;
  color: var(--cm-text);
  background: var(--cm-glass-nav);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}

.channel-monitor-brand-group,
.channel-monitor-brand-text,
.channel-monitor-live-status{
  display: flex;
  align-items: center;
}

.channel-monitor-brand-group {
  min-width: 0;
  gap: 12px;
}

.channel-monitor-brand-badge {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid var(--cm-border-subtle);
  border-radius: 9px;
  color: var(--cm-text);
  background: var(--cm-glass-inner);
  font-size: 20px !important;
}

.channel-monitor-brand-text {
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.channel-monitor-brand-text h2 {
  margin: 0;
  color: var(--cm-text);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.channel-monitor-live-status {
  gap: 5px;
  min-height: 24px;
  border: 1px solid color-mix(in srgb, var(--cm-live-color) 28%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--cm-live-color);
  background: color-mix(in srgb, var(--cm-live-color) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.channel-monitor-live-status.is-healthy { --cm-live-color: var(--cm-green); }
.channel-monitor-live-status.is-warning { --cm-live-color: var(--cm-yellow); }
.channel-monitor-live-status.is-critical { --cm-live-color: var(--cm-red); }
.channel-monitor-live-status.is-unknown { --cm-live-color: var(--cm-unknown); }

.channel-monitor-live-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.channel-monitor-category-pill:focus-visible,
.channel-monitor-models-area button:focus-visible,
.channel-monitor-model-chips button:focus-visible,
.channel-monitor-models-card button:focus-visible,
.channel-monitor-models-search input:not(.is-invalid):focus-visible{
  outline: none;
  box-shadow: var(--pangu-focus-ring);
}

.console-monitor-refresh {
  min-width: 152px;
  font-variant-numeric: tabular-nums;
  color: var(--cm-text);
}

.channel-monitor-countdown-ring {
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
}
.channel-monitor-countdown-ring svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.channel-monitor-countdown-ring .ring-track { stroke: var(--cm-countdown-bg); }
.channel-monitor-countdown-ring .ring-progress { stroke: var(--cm-countdown); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }

.console-monitor-refresh [data-channel-refresh-countdown] {
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--cm-text);
  background: var(--cm-countdown-tag, rgba(0, 0, 0, 0.06));
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.console-monitor-refresh.is-loading .channel-monitor-countdown-ring {
  animation: channelMonitorSpin 800ms linear infinite;
}

.console-monitor-summary:empty {
  display: none;
}

.channel-monitor-bootstrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--pangu-info-border);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--pangu-info-ink);
  background: var(--pangu-info-soft);
  font-size: 13px;
}

.channel-monitor-bootstrap .material-symbols-outlined {
  font-size: 18px;
}

.channel-monitor-filter-bar {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  border: 1px solid var(--cm-glass-border);
  border-radius: 16px;
  padding: 8px 12px;
  background: var(--cm-glass-nav);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}

#channelPlatformFilters { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.channel-monitor-filter-bar > .console-monitor-refresh { flex: 0 0 auto; border-left: 1px solid var(--cm-border-subtle); border-radius: 0; padding-left: 12px; }

.channel-monitor-category-pill {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  padding: 6px 14px;
  color: var(--cm-text-2);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--cm-transition), background var(--cm-transition), transform 100ms ease-out;
}

.channel-monitor-category-pill i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--cm-platform-color, var(--cm-text-3));
}

.channel-monitor-category-pill.is-active {
  color: var(--cm-page);
  background: var(--cm-text);
  font-weight: 750;
}

.channel-monitor-category-pill:active {
  transform: scale(0.97);
}

.platform-openai { --cm-platform-color: var(--cm-openai); --cm-platform-soft: rgba(16, 163, 127, 0.12); --cm-platform-border: rgba(16, 163, 127, 0.26); }
.platform-claude { --cm-platform-color: var(--cm-claude); --cm-platform-soft: rgba(217, 119, 6, 0.12); --cm-platform-border: rgba(217, 119, 6, 0.26); }
.platform-gemini { --cm-platform-color: var(--cm-gemini); --cm-platform-soft: rgba(26, 115, 232, 0.12); --cm-platform-border: rgba(26, 115, 232, 0.26); }
.platform-deepseek { --cm-platform-color: var(--cm-deepseek); --cm-platform-soft: rgba(2, 132, 199, 0.12); --cm-platform-border: rgba(2, 132, 199, 0.26); }
.platform-grok { --cm-platform-color: var(--cm-grok); --cm-platform-soft: rgba(113, 113, 122, 0.14); --cm-platform-border: rgba(113, 113, 122, 0.3); }
.platform-domestic { --cm-platform-color: var(--cm-domestic); --cm-platform-soft: rgba(139, 92, 246, 0.12); --cm-platform-border: rgba(139, 92, 246, 0.26); }

.channel-monitor-platform-stream {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  gap: 26px;
}

.channel-monitor-platform-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cm-platform-border, var(--cm-glass-border));
  border-radius: 20px;
  padding: 22px 24px;
  color: var(--cm-text);
  background: var(--cm-glass-card);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}

.channel-monitor-platform-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--cm-platform-color, transparent);
  content: "";
}

.channel-monitor-platform-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--cm-border-subtle);
  padding-bottom: 16px;
}

.channel-monitor-platform-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.channel-monitor-platform-symbol {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid var(--cm-platform-border, var(--cm-glass-border));
  border-radius: 11px;
  color: var(--cm-platform-color, var(--cm-text));
  background: var(--cm-platform-soft, var(--cm-glass-inner));
  font-size: 21px !important;
}

.channel-monitor-platform-symbol img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.channel-monitor-platform-title {
  min-width: 0;
}

.channel-monitor-platform-title h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  color: var(--cm-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.channel-monitor-rate-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cm-platform-border, var(--cm-glass-border));
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--cm-platform-color, var(--cm-text));
  background: var(--cm-platform-soft, var(--cm-glass-inner));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 750;
}

.channel-monitor-platform-title p {
  margin: 2px 0 0;
  color: var(--cm-text-3);
  font-size: 12px;
}

.channel-monitor-platform-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.channel-monitor-overview-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cm-border-subtle);
  border-radius: 12px;
  padding: 6px 12px;
  background: var(--cm-glass-inner);
}

.channel-monitor-overview-stat span {
  color: var(--cm-text-3);
  font-size: 11px;
  font-weight: 650;
}

.channel-monitor-overview-stat strong {
  color: var(--cm-text);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.channel-monitor-channels-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.channel-monitor-node-card {
  display: flex;
  min-width: 330px;
  min-height: 330px;
  max-width: 440px;
  flex: 0 0 360px;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
  border: 1px solid var(--cm-border-subtle);
  border-radius: 16px;
  padding: 18px 20px;
  background: var(--cm-glass-inner);
  transition: background var(--cm-transition), border-color var(--cm-transition), transform var(--cm-transition);
}

.channel-monitor-node-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.channel-monitor-node-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.channel-monitor-node-id,
.channel-monitor-node-rate {
  flex: 0 0 auto;
  border-radius: 5px;
  padding: 2px 7px;
  color: var(--cm-text-2);
  background: var(--cm-glass-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 750;
}

.channel-monitor-node-rate {
  border: 1px solid var(--cm-border-subtle);
  color: var(--cm-text);
}

.channel-monitor-node-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--cm-text);
  font-size: 15px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-monitor-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  border: 1px solid var(--cm-border-subtle);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--cm-glass-card);
}

.channel-monitor-metrics > div {
  min-width: 0;
}

.channel-monitor-metrics span {
  display: block;
  margin-bottom: 4px;
  color: var(--cm-text-3);
  font-size: 11px;
  font-weight: 650;
}

.channel-monitor-metrics strong {
  display: block;
  overflow: hidden;
  color: var(--cm-text);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-monitor-metrics .is-error strong,
.channel-monitor-metrics .is-unknown strong {
  font-size: 14px;
  white-space: normal;
}
.channel-monitor-metrics .is-error strong { color: var(--pangu-danger-ink); }
.channel-monitor-metrics .is-unknown strong { color: var(--cm-text-3); }
.channel-monitor-check-time {
  margin: -4px 0 10px;
  color: var(--cm-text-3);
  font-size: 11px;
  line-height: 1.5;
}

.channel-monitor-latency {
  margin-bottom: 14px;
  border: 1px solid var(--cm-border-subtle);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--cm-glass-card);
}

.channel-monitor-latency > header,
.channel-monitor-latency > footer,
.channel-monitor-latency > footer > div,
.channel-monitor-latency > footer span {
  display: flex;
  align-items: center;
}

.channel-monitor-latency > header {
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--cm-text-2);
  font-size: 11px;
}

.channel-monitor-latency > header strong {
  font-family: var(--font-mono);
  font-size: 11px;
}

.channel-monitor-latency > header .is-healthy { color: var(--cm-green); }
.channel-monitor-latency > header .is-warning { color: var(--cm-yellow); }
.channel-monitor-latency > header .is-critical,
.channel-monitor-latency > header .is-error { color: var(--cm-red); }
.channel-monitor-latency > header .is-unknown { color: var(--cm-unknown); }

.channel-monitor-latency-timeline {
  display: grid;
  grid-template-columns: repeat(18, minmax(3px, 1fr));
  gap: 3px;
  height: 22px;
}

.channel-monitor-latency-timeline span {
  min-width: 0;
  border-radius: 2px;
  background: var(--cm-unknown);
  transition: filter 150ms ease-out, transform 150ms ease-out;
}

.channel-monitor-latency-timeline .is-healthy { background: var(--cm-green); }
.channel-monitor-latency-timeline .is-warning { background: var(--cm-yellow); }
.channel-monitor-latency-timeline .is-critical { background: var(--cm-red); }
.channel-monitor-latency-timeline .is-unknown { background: var(--cm-unknown); opacity: 0.48; }

.channel-monitor-latency > footer {
  justify-content: space-between;
  gap: 7px;
  margin-top: 6px;
  color: var(--cm-text-3);
  font-size: 10px;
}

.channel-monitor-latency > footer > div {
  gap: 8px;
}

.channel-monitor-latency > footer span {
  gap: 4px;
  white-space: nowrap;
}

.channel-monitor-latency > footer i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.channel-monitor-latency > footer i.healthy { background: var(--cm-green); }
.channel-monitor-latency > footer i.warning { background: var(--cm-yellow); }
.channel-monitor-latency > footer i.critical { background: var(--cm-red); }
.channel-monitor-latency > footer i.unknown { background: var(--cm-unknown); }

.channel-monitor-models-area {
  min-height: 66px;
  border-top: 1px solid var(--cm-border-subtle);
  padding-top: 10px;
}

.channel-monitor-models-area > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--cm-text-3);
  font-size: 11px;
  font-weight: 650;
}

.channel-monitor-models-area > header button:not(.pangu-btn),
.channel-monitor-model-chips button:not(.pangu-btn){
  border: 1px solid var(--cm-border-subtle);
  border-radius: 6px;
  color: var(--cm-text);
  background: var(--cm-glass-pill);
  font: inherit;
  cursor: pointer;
  transition: background var(--cm-transition), border-color var(--cm-transition), transform 100ms ease-out;
}

.channel-monitor-models-area > header button:not(.pangu-btn){
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  color: var(--cm-accent);
  font-size: 12px;
  font-weight: 750;
}

.channel-monitor-models-area > header button .material-symbols-outlined {
  font-size: 13px;
}

.channel-monitor-model-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.channel-monitor-model-chips button:not(.pangu-btn){
  max-width: 100%;
  overflow: hidden;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-monitor-models-area.is-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--cm-text-3);
  font-size: 11px;
}

.channel-monitor-models-area.is-empty small {
  font-size: 11px;
}

.channel-monitor-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--cm-glass-border);
  border-radius: 20px;
  padding: 24px;
  color: var(--cm-text-3);
  background: var(--cm-glass-card);
  text-align: center;
}

.channel-monitor-empty strong {
  color: var(--cm-text);
}

.channel-monitor-empty p {
  margin: 0;
  color: var(--cm-text-2);
  font-size: 13px;
}

.channel-monitor-models-modal[hidden] {
  display: none !important;
}

.channel-monitor-models-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cm-transition);
}

.channel-monitor-models-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.channel-monitor-models-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.channel-monitor-models-card {
  position: relative;
  display: flex;
  width: min(620px, 95vw);
  max-height: 85vh;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cm-glass-border);
  border-radius: 20px;
  color: var(--cm-text);
  background: var(--cm-glass-nav);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28);
  transform: scale(0.96);
  transition: transform var(--cm-transition);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}

.channel-monitor-models-modal.is-open .channel-monitor-models-card {
  transform: scale(1);
}

.channel-monitor-models-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--cm-border-subtle);
  padding: 18px 24px;
}

.channel-monitor-models-head h3,
.channel-monitor-models-head p {
  margin: 0;
}

.channel-monitor-models-head h3 {
  color: var(--cm-text);
  font-size: 17px;
}

.channel-monitor-models-head p {
  margin-top: 2px;
  color: var(--cm-text-3);
  font-size: 12px;
}.channel-monitor-models-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--cm-border-subtle);
  padding: 12px 24px;
  color: var(--cm-text-3);
  background: var(--cm-glass-inner);
}

.channel-monitor-models-search .material-symbols-outlined {
  font-size: 18px;
}

.channel-monitor-models-search input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--cm-border-subtle);
  border-radius: 12px;
  padding: 0 14px;
  color: var(--cm-text);
  background: var(--cm-glass-pill);
  font: inherit;
  font-size: 13px;
}

.channel-monitor-models-search input::placeholder {
  color: var(--cm-text-2);
}

.channel-monitor-models-list {
  display: flex;
  min-height: 180px;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 20px 24px;
}

.channel-monitor-models-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--cm-border-subtle);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--cm-glass-inner);
}

.channel-monitor-models-list code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--cm-text);
  font-size: 13px;
  font-weight: 700;
}

.channel-monitor-models-list article button:not(.pangu-btn){
  display: inline-flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--cm-border-subtle);
  border-radius: 6px;
  padding: 4px 9px;
  color: var(--cm-text);
  background: var(--cm-glass-pill);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.channel-monitor-models-list article button .material-symbols-outlined{
  font-size: 15px;
}

.channel-monitor-models-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  color: var(--cm-text-3);
  font-size: 13px;
}

.channel-monitor-models-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--cm-border-subtle);
  padding: 14px 24px;
  color: var(--cm-text-3);
  background: var(--cm-glass-inner);
  font-size: 12px;
}

@media (hover: hover) and (pointer: fine) {
  
  .channel-monitor-node-card:hover{
    border-color: var(--cm-glass-border);
    background: var(--cm-glass-hover);
    transform: translateY(-1px);
  }

  .console-monitor-refresh:hover {
    border-color: transparent;
    background: transparent;
  }

  .channel-monitor-category-pill:hover {
    color: var(--cm-text);
    background: var(--cm-glass-pill);
  }

  .channel-monitor-category-pill.is-active:hover {
    color: var(--cm-page);
    background: var(--cm-text);
  }

  .channel-monitor-latency-timeline span:hover {
    z-index: 1;
    filter: brightness(1.2);
    transform: scaleY(1.3);
  }

  .channel-monitor-models-area > header button:hover,
  .channel-monitor-model-chips button:hover,
  .channel-monitor-models-list article button:hover{
    border-color: var(--cm-glass-border);
    background: var(--cm-glass-pill-hover);
  }
}

@media (max-width: 768px) {
  .channel-monitor-system-nav {
    align-items: stretch;
    flex-direction: column;
  }  .console-monitor-refresh {
    flex: 1 1 auto;
  }

  .channel-monitor-filter-bar { flex-wrap: wrap; }
  .channel-monitor-filter-bar > .console-monitor-refresh {
    border-left: 0;
    border-radius: 12px;
  }

  .channel-monitor-platform-card {
    padding: 18px 16px;
  }

  .channel-monitor-platform-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .channel-monitor-platform-brand { align-items: flex-start; }

  .channel-monitor-platform-stats {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .channel-monitor-overview-stat {
    justify-content: space-between;
  }

  .channel-monitor-channels-row {
    margin-right: -16px;
    padding-right: 16px;
  }

  .channel-monitor-node-card {
    min-width: min(290px, calc(100vw - 64px));
    flex-basis: min(310px, calc(100vw - 64px));
    padding: 16px;
  }

  .channel-monitor-latency > footer > div {
    display: none;
  }

  .channel-monitor-models-card {
    width: min(620px, calc(100vw - 24px));
  }

  .channel-monitor-models-head,
  .channel-monitor-models-search,
  .channel-monitor-models-list,
  .channel-monitor-models-foot {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (max-width: 480px) {
  .channel-monitor-brand-text {
    align-items: flex-start;
    flex-direction: column;
  }

  #channelThemeLabel {
    display: none;
  }

  .channel-monitor-metrics {
    gap: 7px;
    padding: 10px;
  }

  .channel-monitor-metrics strong {
    font-size: 16px;
  }

  .channel-monitor-models-foot {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  
  .channel-monitor-category-pill,
  .channel-monitor-node-card,
  .channel-monitor-latency-timeline span,
  .channel-monitor-models-modal,
  .channel-monitor-models-card{
    transition: none;
  }

  .console-monitor-refresh.is-loading .channel-monitor-countdown-ring {
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .channel-monitor-system-nav,
  .channel-monitor-filter-bar,
  .channel-monitor-platform-card,
  .channel-monitor-models-card {
    background: var(--pangu-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@keyframes channelMonitorSpin {
  to { transform: rotate(360deg); }
}


/* ==========================================================================
   分组监控 · 节点卡（2026-09-06）
   --------------------------------------------------------------------------
   原来是一条横向滚动的 carousel（flex + scroll-snap + flex:0 0 360px），
   桌面端一行只放得下三张、后面的要横向滚才看得到，右边还空一大块。
   改成会换行的网格：卡片自己撑满整行，顺带把圆角和留白放大。
   窄屏（≤768px）保留原来的横滑形态 —— 手机端不动。
   ========================================================================== */
@media (min-width: 769px) {
  .channel-monitor-channels-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--pangu-space-4);
    overflow: visible;
    padding-bottom: 0;
  }

  .channel-monitor-node-card {
    min-width: 0;
    max-width: none;
    flex: initial;
    min-height: 0;
    border-radius: 20px;
    padding: 22px 24px;
  }

  /* 两个指标各自成盒，便于快速比较当前响应和历史可用率。 */
  .channel-monitor-node-card .channel-monitor-metrics {
    gap: 12px;
    margin-bottom: 16px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }

  .channel-monitor-node-card .channel-monitor-metrics > div {
    border: 1px solid var(--cm-border-subtle);
    border-radius: 14px;
    padding: 12px 14px;
    background: var(--cm-glass-card);
  }

  .channel-monitor-node-card .channel-monitor-latency {
    margin-bottom: 0;
    border-radius: 16px;
    padding: 14px 16px;
  }

  .channel-monitor-node-head {
    margin-bottom: 16px;
  }
}