:root {
  --bg-deep: #0a1a22;
  --bg-mid: #0f2936;
  --surface: rgba(15, 42, 56, 0.75);
  --surface-strong: rgba(20, 55, 72, 0.8);
  --text: #e8f6ff;
  --muted: #9fc2d4;
  --border: rgba(148, 205, 233, 0.26);
  --water-glow: rgba(72, 166, 214, 0.32);
  --accent: #c75a17;
  --accent-strong: #e27125;
  --accent-soft: rgba(199, 90, 23, 0.28);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at -10% -20%, rgba(72, 166, 214, 0.28), transparent 62%),
    radial-gradient(760px 420px at 110% -15%, var(--accent-soft), transparent 58%),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);
}

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 24px 32px;
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 3vw, 2.85rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  color: #eff9ff;
  text-shadow: 0 6px 24px rgba(30, 108, 153, 0.35);
}

select,
textarea,
button {
  font: inherit;
}

.translator {
  display: grid;
  gap: 20px;
}

.box {
  background: linear-gradient(160deg, var(--surface-strong), var(--surface));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(240, 252, 255, 0.08);
  backdrop-filter: blur(6px);
}

.box h2 {
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9e9f8;
}

textarea {
  width: 100%;
  min-height: 150px;
  border: 1px solid rgba(159, 210, 235, 0.25);
  border-radius: 14px;
  padding: 16px 18px;
  resize: vertical;
  line-height: 1.5;
  color: var(--text);
  background: rgba(8, 24, 33, 0.65);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

textarea::placeholder {
  color: var(--muted);
}

textarea:focus {
  outline: none;
  border-color: #57bbe8;
  box-shadow: 0 0 0 4px var(--water-glow);
  background: rgba(8, 27, 37, 0.82);
}

#outputText {
  margin-bottom: 12px;
}

button {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--water-glow);
}

button:hover {
  transform: translateY(-1px);
}

#copyButton {
  background: linear-gradient(180deg, #1f8ec2, #156f9b);
  border-color: rgba(194, 238, 255, 0.26);
  color: #eaf9ff;
  box-shadow: 0 10px 24px rgba(25, 114, 157, 0.35);
}

#copyButton:hover {
  background: linear-gradient(180deg, #24a2db, #1980b2);
  box-shadow: 0 12px 28px rgba(25, 114, 157, 0.4);
}

.full-width {
  width: 100%;
}

@media (max-width: 760px) {
  main {
    padding: 28px 16px 24px;
  }

  .box {
    padding: 16px;
  }

  textarea {
    min-height: 100px;
  }
}