.server-terminal-dialog {
  width: min(980px, calc(100% - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  padding: 0;
  overflow: visible;
  border: 0;
  color: #a9ffbc;
  background: transparent;
}

.server-terminal-dialog::backdrop {
  background: rgba(2, 9, 7, .86);
  backdrop-filter: blur(5px);
}

.server-terminal-window {
  position: relative;
  overflow: hidden;
  border: 4px solid #52c975;
  background: #050c09;
  box-shadow: 0 0 0 4px #122b1c, 13px 15px 0 rgba(0, 0, 0, .72), inset 0 0 0 3px #173d26;
}

.server-terminal-window::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 49px 0 34px;
  pointer-events: none;
  opacity: .13;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(155, 255, 185, .45) 3px 4px);
}

.server-terminal-head,
.server-terminal-foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.server-terminal-head {
  min-height: 49px;
  padding: 7px 9px 7px 15px;
  border-bottom: 3px solid #2f8650;
  color: #d0ffda;
  background: #0b1e13;
}

.server-terminal-head p,
.server-terminal-head h2,
.server-terminal-foot,
.server-terminal-message { margin: 0; }

.server-terminal-head p { color: #6cce86; font-size: 8px; letter-spacing: .13em; }
.server-terminal-head h2 { margin-top: 2px; font-size: clamp(15px, 2.5vw, 20px); letter-spacing: .08em; }
.server-terminal-head__actions { display: inline-flex; align-items: center; gap: 7px; }

.server-terminal-refresh,
.server-terminal-close {
  border: 2px solid #3f9e5d;
  color: #b7ffc7;
  background: #102c1b;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .32);
  cursor: pointer;
  font: inherit;
}

.server-terminal-refresh { min-height: 27px; padding: 4px 7px; font-size: 8px; }
.server-terminal-close { width: 30px; height: 27px; padding: 0; font-size: 19px; line-height: 1; }

.server-terminal-refresh:disabled { cursor: progress; opacity: .76; }
.server-terminal-window[data-sync="active"] { box-shadow: 0 0 0 4px #1e5631, 0 0 24px rgba(93, 255, 136, .3), 13px 15px 0 rgba(0, 0, 0, .72), inset 0 0 0 3px #235b36; }

.server-terminal-refresh:hover,
.server-terminal-refresh:focus-visible,
.server-terminal-close:hover,
.server-terminal-close:focus-visible {
  outline: 0;
  border-color: #d8ffe0;
  color: #effff1;
  background: #1e5d34;
}

.server-terminal-screen {
  position: relative;
  z-index: 1;
  min-height: 420px;
  max-height: calc(100dvh - 168px);
  overflow: auto;
  padding: clamp(15px, 3vw, 24px);
  background: radial-gradient(circle at 80% 0, rgba(36, 126, 66, .22), transparent 35%), #030806;
}

.server-terminal-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #7cff9e;
  font-size: 11px;
}

.server-terminal-prompt span { color: #dcff9e; }
.server-terminal-prompt code { color: #caffd4; font: inherit; }
.server-terminal-prompt i { width: 7px; height: 13px; background: #8effa7; animation: terminal-cursor 900ms steps(1, end) infinite; }

@keyframes terminal-cursor { 50% { opacity: 0; } }

.server-terminal-message {
  min-height: 32px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 2px solid #246f40;
  color: #8df3a6;
  background: rgba(12, 44, 25, .58);
  font-size: 9px;
  letter-spacing: .06em;
}

.server-terminal-message[data-state="success"] { border-color: #4bbd68; color: #bcffcb; }
.server-terminal-message[data-state="error"] { border-color: #d56f5f; color: #ffafa1; }

.server-terminal-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.server-terminal-summary .server-terminal-metric {
  min-height: 60px;
  padding: 8px;
  border: 2px solid #256840;
  background: rgba(11, 44, 24, .74);
}

.server-terminal-metric span,
.server-terminal-metric strong { display: block; overflow-wrap: anywhere; }
.server-terminal-metric span { color: #6dc987; font-size: 8px; letter-spacing: .06em; }
.server-terminal-metric strong { margin-top: 5px; color: #d2ffdb; font-size: 11px; line-height: 1.35; }

.server-terminal-nodes { display: grid; gap: 10px; }

.server-terminal-node {
  padding: 12px;
  border: 3px solid #287747;
  background: rgba(5, 20, 11, .88);
  box-shadow: inset 0 0 0 2px rgba(31, 96, 56, .3);
}

.server-terminal-node.is-offline { border-color: #a4554d; color: #ffb09f; }

.server-terminal-node__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.server-terminal-node__identity { display: flex; min-width: 0; gap: 9px; }
.server-terminal-node__index { flex: 0 0 auto; padding: 4px; border: 1px solid #4fbf6c; color: #d3ff9c; background: #123820; font-size: 8px; }
.server-terminal-node h3 { margin: 0; color: #e0ffe5; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.server-terminal-node small { display: block; margin-top: 3px; color: #70bf88; font-size: 8px; }
.server-terminal-node__state { flex: 0 0 auto; padding: 5px 7px; border: 2px solid #57be70; color: #d7ffe1; background: #174327; font-size: 9px; }
.server-terminal-node.is-offline .server-terminal-node__state { border-color: #c46758; color: #ffd0c5; background: #562c29; }

.server-terminal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px 10px;
  margin-top: 11px;
}

.server-terminal-metrics .server-terminal-metric { min-width: 0; padding-top: 6px; border-top: 1px solid rgba(97, 198, 123, .38); }
.server-terminal-metrics .server-terminal-metric strong { font-size: 10px; }

.server-terminal-docker,
.server-terminal-history-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(97, 198, 123, .38);
  font-size: 9px;
}

.server-terminal-docker > span,
.server-terminal-history-row > span { color: #6dc987; }
.server-terminal-docker strong { color: #88ad91; font: inherit; line-height: 1.4; }
.server-terminal-docker.is-available strong { color: #c6ffd2; }

.server-terminal-history {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 28px;
  padding: 2px 3px;
  border: 1px solid #246e3d;
  background: #08160d;
}

.server-terminal-history i { flex: 1 1 0; min-width: 2px; height: var(--value); background: linear-gradient(#b4ff92, #38bc68); }
.server-terminal-history__empty { margin: auto; color: #64866c; font-size: 8px; }

.server-terminal-empty { margin: 0; padding: 16px; border: 2px dashed #387e51; color: #83b98f; font-size: 10px; text-align: center; }

.server-terminal-foot {
  min-height: 32px;
  padding: 7px 12px;
  border-top: 2px solid #2e8550;
  color: #75c58a;
  background: #0a1b10;
  font-size: 7px;
  letter-spacing: .09em;
}

@media (max-width: 700px) {
  .server-terminal-dialog { width: min(100% - 14px, 980px); }
  .server-terminal-screen { min-height: 360px; max-height: calc(100dvh - 146px); padding: 12px; }
  .server-terminal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-terminal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-terminal-docker,
  .server-terminal-history-row { grid-template-columns: 1fr; gap: 5px; }
  .server-terminal-head { align-items: start; }
  .server-terminal-refresh { font-size: 7px; }
  .server-terminal-foot span:last-child { display: none; }
}

body.is-motion-reduced .server-terminal-prompt i { animation: none; }