:root {
  color-scheme: light;
  --color-page: #f1f5f9;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-border: #cbd5e1;
  --color-border-strong: #94a3b8;
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-primary: #1d4ed8;
  --color-primary-hover: #1e40af;
  --color-primary-text: #ffffff;
  --color-staging-bg: #dbeafe;
  --color-test-bg: #fffbeb;
  --color-focus: #2563eb;
  --color-success: #166534;
  --color-success-bg: #dcfce7;
  --color-warning: #854d0e;
  --color-warning-bg: #fef9c3;
  --color-danger: #991b1b;
  --color-danger-bg: #fee2e2;
  --color-neutral: #334155;
  --color-neutral-bg: #e2e8f0;
  --shadow-panel: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.04);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --control-height: 2.75rem;
  --content-width: 75rem;
  --login-width: 28rem;
  --font-size-stat: 2rem;
  --resource-width: 18rem;
  --transition-fast: 160ms ease-out;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  background: var(--color-page);
}

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--color-text);
  background: var(--color-page);
  font-family: "Microsoft JhengHei UI", "PingFang TC", "Noto Sans TC", "Segoe UI Variable", sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

button,
input,
select {
  font: inherit;
}

button {
  touch-action: manipulation;
}

[hidden] {
  display: none;
}

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  color: var(--color-primary-text);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

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

.page-shell {
  width: min(100% - (var(--space-4) * 2), var(--content-width));
  margin-inline: auto;
  padding-block: var(--space-8);
}

.login-panel,
.dashboard {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.login-panel {
  width: min(100%, var(--login-width));
  margin: var(--space-10) auto 0;
  padding: var(--space-6);
}

.panel-heading,
.dashboard-header {
  margin-bottom: var(--space-6);
}

.eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

h1 {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.panel-description,
.checked-at {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.login-form {
  display: grid;
  gap: var(--space-4);
}

.form-field {
  display: grid;
  gap: var(--space-2);
}

.form-field label {
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.form-field input,
.form-field select {
  min-height: var(--control-height);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.form-field input:hover,
.form-field select:hover {
  border-color: var(--color-muted);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.resource-details summary:focus-visible,
.button:focus-visible,
.platform-link:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.button {
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.button-primary {
  color: var(--color-primary-text);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.button-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.button-secondary {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

.button-secondary:hover:not(:disabled) {
  background: var(--color-surface-subtle);
  border-color: var(--color-muted);
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.status-line {
  min-height: var(--space-6);
  margin: var(--space-4) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.status-line[data-tone="error"] {
  color: var(--color-danger);
}

.status-line[data-tone="success"] {
  color: var(--color-success);
}

.dashboard {
  padding: var(--space-6);
}

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.dashboard-status {
  margin: 0 0 var(--space-4);
}

.copy-status {
  min-height: 0;
  margin: 0 0 var(--space-4);
}

.copy-status:empty {
  margin-bottom: 0;
}

.environment-groups {
  display: grid;
  gap: var(--space-8);
}

.stage-group {
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.stage-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-strong);
}

.stage-group-staging .stage-heading {
  background: var(--color-staging-bg);
}

.stage-group-test .stage-heading {
  background: var(--color-test-bg);
}

.stage-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--control-height);
  min-height: var(--control-height);
  color: var(--color-primary-text);
  background: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.stage-group-test .stage-number {
  color: var(--color-warning-bg);
  background: var(--color-warning);
}

.stage-heading h2,
.stage-heading p,
.environment-heading h3,
.environment-heading p,
.environment-column h4 {
  margin: 0;
}

.stage-heading h2 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.stage-heading p {
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.stage-environments {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.environment-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.environment-card-staging {
  border-left-color: var(--color-primary);
}

.environment-card-test {
  border-left-color: var(--color-warning);
}

.environment-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
}

.environment-heading h3 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
}

.environment-heading p {
  color: var(--color-muted);
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  font-size: var(--font-size-xs);
}

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

.environment-column {
  min-width: 0;
  padding: var(--space-4);
}

.environment-column + .environment-column:not(.environment-resources) {
  border-left: 1px solid var(--color-border);
}

.environment-column h4 {
  margin-bottom: var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.agent-state {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-2) var(--space-3);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  padding: var(--space-1) var(--space-2);
  color: var(--color-neutral);
  background: var(--color-neutral-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: var(--line-height-tight);
}

.status-badge[data-state="available"] {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.status-badge[data-state="unavailable"] {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}

.status-badge[data-state="error"] {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.image-value {
  min-width: 0;
  padding-top: var(--space-1);
  color: var(--color-text);
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  overflow-wrap: anywhere;
}

.agent-error {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.service-access {
  display: grid;
  gap: var(--space-1);
}

.service-access-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-block: var(--space-1);
}

.service-access-row-deployment {
  grid-template-columns: minmax(0, 1fr) max-content;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.deployment-path-label {
  grid-column: 1 / -1;
}

.service-access-label {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.service-access-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.platform-link {
  width: fit-content;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-underline-offset: var(--space-1);
}

.platform-link:hover {
  color: var(--color-primary-hover);
}

.api-endpoint,
.deployment-path {
  color: var(--color-text);
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  font-size: var(--font-size-xs);
}

.deployment-path {
  padding: var(--space-2);
  background: var(--color-neutral-bg);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.copy-button {
  min-width: var(--control-height);
  padding-inline: var(--space-3);
  font-size: var(--font-size-sm);
}

@media (max-width: 45rem) {
  .page-shell {
    width: min(100% - (var(--space-3) * 2), var(--content-width));
    padding-block: var(--space-4);
  }

  .login-panel {
    margin-top: var(--space-4);
  }

  .login-panel,
  .dashboard {
    padding: var(--space-4);
  }

  .dashboard-header {
    display: grid;
  }

  .dashboard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .environment-groups {
    gap: var(--space-6);
  }

  .stage-heading {
    padding: var(--space-3);
  }

  .stage-environments {
    gap: var(--space-3);
    padding: var(--space-3);
  }

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

  .environment-column + .environment-column:not(.environment-resources) {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .agent-state {
    grid-template-columns: 1fr;
  }

  .service-access-row {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .service-access-label {
    grid-column: 1 / -1;
  }

  .copy-button {
    min-height: var(--control-height);
    min-width: var(--control-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.summary-strip > div { padding: var(--space-4) var(--space-5); }
.summary-strip dt { color: var(--color-muted); font-size: var(--font-size-sm); }
.summary-strip dd { margin: var(--space-1) 0 0; font-size: var(--font-size-stat); font-weight: 600; line-height: var(--line-height-tight); font-variant-numeric: tabular-nums; }
.summary-attention[data-tone="warning"] dd { color: var(--color-warning); }
.summary-attention[data-tone="success"] dd { color: var(--color-success); }
.filter-panel { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.filter-bar { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.filter-bar .form-field { min-width: 0; }
.filter-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.filter-footer p { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm); }
.filter-footer .button { flex-shrink: 0; }
.result-count { margin: var(--space-5) 0 var(--space-1); font-weight: 600; font-size: var(--font-size-sm); }
.dashboard-status { color: var(--color-muted); font-size: var(--font-size-sm); }
.stage-heading h2 { font-size: var(--font-size-lg); }
.stage-heading { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.stage-number { flex-basis: var(--space-8); min-height: var(--space-8); border-radius: var(--radius-sm); }
.group-count { margin-left: auto; color: var(--color-muted); font-size: var(--font-size-sm); white-space: nowrap; }
.environment-groups { gap: var(--space-5); }
.environment-resources { grid-column: 1 / -1; padding: 0; border-top: 1px solid var(--color-border); }
.resource-details summary { min-height: var(--control-height); padding: var(--space-3) var(--space-4); cursor: pointer; font-size: var(--font-size-sm); }
.resource-details summary:hover { background: var(--color-surface-subtle); }
.resource-details summary > span { font-weight: 600; }
.resource-host { display: inline-block; max-width: var(--resource-width); margin-left: var(--space-3); color: var(--color-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; vertical-align: middle; }
.resource-details .service-access { padding: 0 var(--space-4) var(--space-4); }
.service-access-row { grid-template-columns: var(--resource-width) minmax(0, 1fr); }
.service-access-row-deployment { grid-template-columns: minmax(0, 1fr) max-content; }
.platform-link { min-height: var(--control-height); display: inline-flex; align-items: center; }
.status-badge { width: fit-content; }
.environment-heading p { overflow-wrap: anywhere; }
.empty-state { padding: var(--space-8) var(--space-4); text-align: center; background: var(--color-surface-subtle); border-radius: var(--radius-md); }
.empty-state h2 { margin: 0; font-size: var(--font-size-lg); }
.empty-state p { color: var(--color-muted); margin: var(--space-3) 0 var(--space-5); }
.button:active:not(:disabled) { transform: translateY(1px); }
@media (max-width: 64rem) {
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-access-row { grid-template-columns: minmax(0, 1fr) max-content; }
}
@media (max-width: 45rem) {
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip > div { padding: var(--space-3) var(--space-4); }
  .filter-bar { grid-template-columns: 1fr; }
  .filter-footer { align-items: flex-start; flex-direction: column; }
  .resource-host { display: block; margin: var(--space-1) 0 0 var(--space-4); }
  .stage-heading { flex-wrap: wrap; }
  .group-count { white-space: normal; }
}

.version-value { font-size: var(--font-size-base); font-weight: 600; line-height: var(--line-height-base); overflow-wrap: anywhere; }
.image-access-row { grid-template-columns: 1fr; padding-block: var(--space-2); }
@media (max-width: 45rem) {
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-field, .filter-bar .form-field:last-child { grid-column: 1 / -1; }
}