.compare-workspace {
  max-width: 1120px;
}

.compare-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.compare-layout label {
  display: grid;
  gap: 10px;
}

.compare-layout textarea,
.compare-layout input {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  background: rgba(8, 16, 34, 0.82);
  border: 1px solid rgba(120, 150, 190, 0.35);
  border-radius: 14px;
  color: #fff;
  padding: 16px;
  outline: none;
  transition: 0.2s ease;
}

.compare-layout input {
  min-height: 52px;
  resize: none;
}

.compare-layout textarea::placeholder,
.compare-layout input::placeholder {
  color: rgba(210, 220, 240, 0.45);
}

.compare-layout textarea:focus,
.compare-layout input:focus {
  border-color: #58a6ff;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.18);
  background: rgba(10, 20, 40, 0.92);
}

.compare-result {
  margin-top: 22px;
  border-radius: 16px;
  padding: 18px 20px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(120, 150, 190, 0.28);
  background: rgba(255,255,255,0.035);
}

.compare-result b {
  font-size: 16px;
}

.compare-result span,
.compare-result pre {
  color: rgba(230, 238, 250, 0.82);
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
}

.compare-result.ok {
  border-color: rgba(38, 222, 129, 0.45);
  background: rgba(38, 222, 129, 0.13);
}

.compare-result.bad {
  border-color: rgba(255, 90, 90, 0.45);
  background: rgba(255, 90, 90, 0.12);
}

.compare-result.neutral {
  border-color: rgba(88, 166, 255, 0.35);
}

@media (max-width: 760px) {
  .compare-layout {
    grid-template-columns: 1fr;
  }
}