/* Dark theme, responsive */
:root { --bg:#121212; --panel:#1e1e1e; --muted:#bbbbbb; --fg:#e0e0e0; --border:#444; --btn:#2b2b2b; --btnH:#3b3b3b; }
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif; margin: 22px; line-height: 1.5; }
h1 { margin-bottom: 0.3em; }
.container { max-width: 960px; }
textarea#inputText { width: 100%; height: 8em; background: var(--panel); color: #f0f0f0; border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-size: 14px; font-family: inherit; margin-bottom: 1em; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; margin-bottom: 1em; }
.controls label { font-weight: 600; margin-right: 0.3em; }
.controls input, .controls select { background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 14px; font-family: inherit; }
.controls input[disabled] { opacity: 0.55; }
.controls button { padding: 8px 14px; font-size: 14px; font-family: inherit; background: var(--btn); color: #fff; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.controls button:hover { background: var(--btnH); }
#output { white-space: pre-wrap; word-wrap: break-word; background: var(--panel); color: #e8e8e8; border: 1px solid var(--border); border-radius: 6px; padding: 12px; min-height: 3em; }
small.hint { color: var(--muted); display:block; margin-top:0.4em; }
@media (max-width: 640px) {
  .controls { gap: 0.6rem; }
}
.controls pretty-button {
  background: #4a90e2;
  color: white;
  border: none;
  padding: 8px 12px;
  margin: 2px;
  border-radius: 6px;
  cursor: pointer;
  font-family: "Faustina", serif;
  font-size: 1.1em;
  transition: all 0.3s;
  min-width: 40px;
}

.controls pretty-button:hover {
  background: #357abd;
  transform: translateY(-1px);
}

.controls pretty-button:disabled {
  background: #666;
  cursor: not-allowed;
  transform: none;
  opacity: 0.5;
}

.controls pretty-button:disabled:hover {
  background: #666;
  transform: none;
}