:root {
  --bg: #0f1115;
  --panel: #161a22;
  --text: #e6e6eb;
  --muted: #8a8f98;
  --accent: #5cc8ff;
  --ok: #6fcf97;
  --warn: #f2c94c;
  --bad: #eb5757;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.container {
  max-width: 420px;
  margin: 40px auto;
  padding: 16px;
  background: var(--panel);
  border-radius: 6px;
}

label {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

input {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  background: #0c0f14;
  color: var(--text);
  border: 1px solid #222836;
  border-radius: 4px;
}

button {
  margin-top: 16px;
  width: 100%;
  padding: 10px;
  background: var(--accent);
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #0c0f14;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;

  padding: 8px 28px 8px 8px; /* room for arrow */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 55%,
    calc(100% - 10px) 55%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

.right {
  display: flex;
  justify-content: flex-end;
}

.right select {
  width: 120px;
}