.catalog-shell {
  min-height: 100vh;
}

.catalog-shell .po-app-main {
  padding-bottom: var(--space-16);
}

.catalog-view-grid,
.catalog-detail-grid,
.catalog-two-col,
.catalog-metrics,
.catalog-history-list {
  display: grid;
  gap: var(--space-4);
}

.catalog-view-grid {
  grid-template-columns: 1.2fr 0.8fr;
}

.catalog-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalog-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.catalog-stack {
  display: grid;
  gap: var(--space-5);
}

.catalog-toolbar-form {
  display: inline-flex;
}

.catalog-toolbar-form button {
  border: 0;
}

.catalog-notice,
.catalog-notice-inline {
  color: var(--color-text-strong);
  background: color-mix(in srgb, var(--theme-card-bg) 85%, #ffc529 15%);
  border: 1px solid color-mix(in srgb, var(--theme-border) 70%, #ffc529 30%);
}

.catalog-notice {
  margin-bottom: var(--space-4);
}

.catalog-notice-inline {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: 20px;
}

.catalog-hero-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255, 197, 41, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(15, 87, 255, 0.04)),
    var(--theme-card-bg);
}

[data-theme="dark"] .catalog-hero-card {
  background:
    radial-gradient(circle at top right, rgba(255, 197, 41, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(19, 35, 61, 0.96), rgba(10, 20, 38, 0.92));
}

.catalog-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.catalog-mini-card {
  min-height: 148px;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--theme-surface-muted);
  border: 1px solid var(--theme-border);
  border-radius: 22px;
}

.catalog-mini-card strong {
  color: var(--color-text-heading);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
}

.catalog-keyvals {
  display: grid;
  gap: var(--space-3);
}

.catalog-keyvals div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--theme-border);
}

.catalog-keyvals div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.catalog-keyvals dt {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalog-keyvals dd {
  margin: 0;
  color: var(--color-text-strong);
}

.catalog-section-stack {
  display: grid;
  gap: var(--space-4);
}

.catalog-section-card {
  display: grid;
  gap: var(--space-4);
}

.catalog-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.catalog-section-head h3,
.catalog-section-head h4 {
  margin: 0;
  color: var(--color-text-heading);
  font-family: var(--font-display);
}

.catalog-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.catalog-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  font-weight: 900;
  background: var(--theme-surface-muted);
  border-radius: var(--radius-full);
}

.catalog-project-list {
  display: grid;
  gap: var(--space-4);
}

.catalog-project-card {
  display: grid;
  gap: var(--space-4);
}

.catalog-instance-card {
  display: grid;
  gap: var(--space-5);
}

.catalog-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.catalog-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.catalog-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.catalog-form-span-2 {
  grid-column: span 2;
}

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

.catalog-field-stack span {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalog-field-stack input {
  width: 100%;
}

.catalog-checkbox-stack {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.catalog-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-strong);
}

.catalog-code {
  overflow: auto;
  padding: var(--space-5);
  color: var(--color-text-strong);
  font-size: 0.85rem;
  background: color-mix(in srgb, var(--theme-card-bg) 84%, #0d2148 16%);
  border: 1px solid var(--theme-border);
  border-radius: 22px;
}

[data-theme="dark"] .catalog-code {
  background: rgba(7, 17, 31, 0.9);
}

.catalog-status-ok {
  color: var(--color-status-success-text);
  background: var(--color-status-success-bg);
}

.catalog-status-error {
  color: var(--color-status-danger-text);
  background: var(--color-status-danger-bg);
}

.catalog-status-muted {
  color: var(--color-status-muted-text);
  background: var(--color-status-muted-bg);
}

.catalog-section-tabs {
  display: grid;
  gap: var(--space-4);
}

.catalog-subgrid {
  display: grid;
  gap: var(--space-3);
}

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

.catalog-empty {
  min-height: 92px;
}

.catalog-login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-8);
}

.catalog-login-card {
  width: min(100%, 960px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
}

.catalog-login-band {
  position: relative;
  overflow: hidden;
  padding: var(--space-8);
  color: var(--color-text-inverse);
  background: var(--gradient-dark);
  border-radius: 28px;
}

.catalog-login-band h1 {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.catalog-login-band p,
.catalog-login-band li {
  color: rgba(248, 251, 255, 0.82);
}

.catalog-login-panel {
  display: grid;
  gap: var(--space-5);
  align-content: center;
}

.catalog-table-wrap {
  overflow: auto;
  border: 1px solid var(--theme-border);
  border-radius: 24px;
}

.catalog-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.catalog-timeline {
  display: grid;
  gap: var(--space-3);
}

.catalog-timeline-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--theme-surface-muted);
  border-radius: 20px;
}

.catalog-muted {
  color: var(--color-text-soft);
}

@media (max-width: 1080px) {
  .catalog-view-grid,
  .catalog-login-card,
  .catalog-two-col,
  .catalog-card-grid,
  .catalog-subgrid-2,
  .catalog-form-grid {
    grid-template-columns: 1fr;
  }

  .catalog-form-span-2 {
    grid-column: auto;
  }
}

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

  .catalog-keyvals div {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}