.automation-panel {
  display: grid;
  gap: 22px;
}

.automation-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 190px;
  padding: 34px 38px;
  border: 1px solid rgba(94, 160, 255, .24);
  border-radius: 28px;
  color: #f7fbff;
  background:
    radial-gradient(circle at 82% 15%, rgba(44, 208, 170, .24), transparent 28%),
    radial-gradient(circle at 8% 100%, rgba(72, 111, 255, .32), transparent 38%),
    linear-gradient(135deg, #0b1427 0%, #101d37 58%, #102a35 100%);
  box-shadow: 0 22px 60px rgba(2, 8, 23, .25);
}

.automation-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.automation-hero > * { position: relative; z-index: 1; }
.automation-eyebrow, .automation-kicker {
  display: block;
  margin-bottom: 8px;
  color: #62dcc1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.automation-hero h2 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 46px); }
.automation-hero p { max-width: 650px; margin: 0; color: #b9c8df; font-size: 16px; }
.automation-hero-mark {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background: rgba(255,255,255,.06);
  font-size: 46px;
  backdrop-filter: blur(12px);
}

.automation-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.automation-metric {
  padding: 18px;
  border: 1px solid var(--border, #27354d);
  border-radius: 18px;
  background: var(--card, #101827);
}
.automation-metric strong { display: block; font-size: 27px; color: var(--text, #f4f7fb); }
.automation-metric span { color: var(--muted, #91a0b6); font-size: 12px; }
.automation-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, .75fr); gap: 18px; align-items: start; }
.automation-main, .automation-side { display: grid; gap: 18px; }
.automation-side { position: sticky; top: 14px; }
.automation-card {
  padding: 22px;
  border: 1px solid var(--border, #27354d);
  border-radius: 22px;
  background: var(--card, #101827);
  box-shadow: 0 14px 36px rgba(3, 8, 20, .12);
}
.automation-heading, .automation-preview-head, .automation-server-head, .automation-publication {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.automation-card h3 { margin: 0; color: var(--text, #f4f7fb); font-size: 20px; }
.automation-help, .automation-mcp p { margin: 9px 0 18px; color: var(--muted, #91a0b6); line-height: 1.55; }
.automation-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 17px 0; color: var(--muted, #91a0b6); font-size: 12px; }
.port-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.port-dot.public { background: #ff6d83; box-shadow: 0 0 0 4px rgba(255,109,131,.12); }
.port-dot.restricted { background: #f3bd5c; box-shadow: 0 0 0 4px rgba(243,189,92,.12); }
.port-dot.local { background: #59d7bd; box-shadow: 0 0 0 4px rgba(89,215,189,.12); }
.automation-server-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.automation-server {
  padding: 17px;
  border: 1px solid rgba(130, 154, 190, .15);
  border-radius: 17px;
  background: rgba(120, 145, 180, .045);
}
.automation-server h4 { margin: 0 0 4px; color: var(--text, #f4f7fb); font-size: 15px; }
.automation-server-meta { color: var(--muted, #91a0b6); font-size: 11px; word-break: break-all; }
.automation-ports, .automation-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.automation-port, .automation-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
}
.automation-port.public { color: #ff8da0; background: rgba(255, 85, 117, .1); }
.automation-port.restricted { color: #f1c56e; background: rgba(241, 181, 72, .1); }
.automation-port.local { color: #67d8c0; background: rgba(56, 204, 173, .1); }
.automation-port.unknown { color: #aab7ca; background: rgba(150, 165, 188, .1); }
.automation-tag { color: #a9c7ff; background: rgba(74, 130, 238, .1); font-family: inherit; }
.automation-empty { padding: 18px; color: var(--muted, #91a0b6); text-align: center; }
.automation-traefik-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.automation-traefik-item { padding: 16px; border: 1px solid rgba(130,154,190,.15); border-radius: 16px; }
.automation-traefik-item strong { display: block; color: var(--text, #f4f7fb); font-size: 14px; }
.automation-traefik-item span { display: block; margin-top: 5px; color: var(--muted, #91a0b6); font-size: 11px; }
.automation-status { display: inline-flex !important; width: fit-content; padding: 4px 8px; border-radius: 999px; }
.automation-status.ready, .automation-status.active { color: #60dbb7; background: rgba(42, 204, 158, .1); }
.automation-status.manual, .automation-status.draft { color: #efbd62; background: rgba(239, 178, 67, .1); }
.automation-status.error { color: #ff7e92; background: rgba(255, 90, 117, .1); }
.automation-status.disabled, .automation-status.rolled_back { color: #aab7ca; background: rgba(150,165,188,.1); }
.automation-publications { display: grid; gap: 9px; margin-top: 15px; }
.automation-publication { padding: 13px 15px; border: 1px solid rgba(130,154,190,.15); border-radius: 14px; }
.automation-publication strong { color: var(--text, #f4f7fb); font-size: 13px; }
.automation-publication small { display: block; margin-top: 4px; color: var(--muted, #91a0b6); }
.automation-apply { padding: 7px 10px; border-radius: 10px; }
.automation-publication > div:last-child { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.automation-rollback { padding: 7px 10px; border-radius: 10px; color: #ff9cac; background: rgba(255,86,116,.09); }
.automation-wizard form { display: grid; gap: 12px; }
.automation-wizard label { display: grid; gap: 6px; color: var(--muted, #91a0b6); font-size: 12px; font-weight: 700; }
.automation-wizard input, .automation-wizard select {
  width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border, #27354d);
  border-radius: 11px; color: var(--text, #f4f7fb); background: rgba(4, 10, 22, .28);
}
.automation-domain-input { display: flex; align-items: stretch; }
.automation-domain-input input { min-width: 0; border-radius: 11px 0 0 11px; }
.automation-domain-input span { display: flex; align-items: center; max-width: 170px; padding: 0 10px; border: 1px solid var(--border, #27354d); border-left: 0; border-radius: 0 11px 11px 0; color: #78aaf8; background: rgba(67,122,219,.08); overflow: hidden; }
.automation-note { min-height: 0; padding: 10px 11px; border-radius: 11px; color: #9bb0cb; background: rgba(119,145,180,.07); font-size: 11px; line-height: 1.45; }
.automation-wizard-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }
.automation-message { min-height: 17px; color: #73d9bd; font-size: 12px; }
.automation-preview { margin-top: 15px; overflow: hidden; border: 1px solid rgba(95,142,218,.22); border-radius: 14px; background: #07101f; }
.automation-preview-head { padding: 10px 12px; color: #b7c7dd; font-size: 11px; }
.automation-preview-head button { padding: 5px 8px; border-radius: 8px; color: #9fc4ff; background: rgba(96,148,232,.1); }
.automation-preview pre { max-height: 330px; margin: 0; padding: 15px; overflow: auto; color: #b8e8d9; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.automation-mcp code { display: block; padding: 11px; border-radius: 11px; color: #8bc5ff; background: #07101f; word-break: break-all; }
.automation-mcp button { width: 100%; margin-top: 14px; }

.automation-launchpad { overflow: hidden; border-color: rgba(83,202,172,.25); background: linear-gradient(145deg, rgba(16,24,39,.98), rgba(10,28,36,.96)); }
.deployment-wizard-form { display: grid; gap: 18px; margin-top: 20px; }
.deployment-wizard-step { display: flex; align-items: center; gap: 10px; color: #eaf5f3; }
.deployment-wizard-step span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #071b18; background: #64d9bd; font-size: 12px; font-weight: 900; }
.deployment-wizard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.deployment-wizard-grid label, .deployment-wizard-confirm { display: grid; gap: 7px; color: var(--muted, #91a0b6); font-size: 12px; font-weight: 700; }
.deployment-wizard-grid .wide { grid-column: 1 / -1; }
.deployment-wizard-grid input, .deployment-wizard-grid select, .deployment-wizard-grid textarea, .deployment-wizard-confirm input {
  width: 100%; box-sizing: border-box; min-height: 43px; padding: 10px 12px;
  border: 1px solid var(--border, #27354d); border-radius: 11px;
  color: var(--text, #f4f7fb); background: rgba(4,10,22,.35); font: inherit;
}
.deployment-wizard-grid textarea { min-height: 76px; resize: vertical; }
.deployment-wizard-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.deployment-wizard-preview { display: grid; gap: 16px; padding: 17px; border: 1px solid rgba(95,190,166,.23); border-radius: 16px; background: rgba(4,14,22,.46); }
.deployment-wizard-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.deployment-wizard-check { padding: 9px 11px; border-radius: 10px; color: #8ee2ca; background: rgba(52,201,160,.08); font-size: 11px; }
.deployment-wizard-configs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.deployment-wizard-configs > div { min-width: 0; overflow: hidden; border: 1px solid rgba(118,151,201,.17); border-radius: 13px; background: #07101f; }
.deployment-wizard-configs strong { display: block; padding: 10px 12px; color: #b7c7dd; font-size: 11px; }
.deployment-wizard-configs pre { max-height: 300px; margin: 0; padding: 14px; overflow: auto; color: #b8e8d9; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.deployment-wizard-confirm code { width: fit-content; color: #8bc5ff; }
.deployment-wizard-result { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(89,215,189,.24); border-radius: 14px; color: #b9c8df; background: rgba(37,145,122,.08); font-size: 12px; line-height: 1.55; }
.deployment-wizard-result-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.deployment-wizard-result a { color: #8bc5ff; }

@media (max-width: 1100px) {
  .automation-layout { grid-template-columns: 1fr; }
  .automation-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .automation-hero { min-height: auto; padding: 25px; }
  .automation-hero-mark { display: none; }
  .automation-summary, .automation-server-grid, .automation-traefik-grid, .automation-side { grid-template-columns: 1fr; }
  .automation-wizard-actions { grid-template-columns: 1fr; }
  .deployment-wizard-grid, .deployment-wizard-checklist, .deployment-wizard-configs { grid-template-columns: 1fr; }
  .deployment-wizard-grid .wide { grid-column: auto; }
}