:root{
  --bg: #eef2fa; --panel: #ffffff; --panel-2: #eaeff8; --line: #d9e0ee;
  --accent: #2f5da8; --accent-soft: #dde6f6; --accent-dim: #f1f5fc;
  --text: #16202f; --muted: #626e83; --muted-2: #93a0b4;
}

.fields{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; }
@media (max-width: 560px){
  .fields{ grid-template-columns: 1fr; }
  .swap-col{ transform: rotate(90deg); margin: 4px auto; }
}

.field{ display: flex; flex-direction: column; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.field label{ font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

input[type=number], input[type=text], select{
  width: 100%; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600;
}
input:focus, select:focus{ outline: none; border-color: var(--accent); }
input[readonly]{ background: var(--accent-dim); color: var(--accent); }

select{ font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13.5px; }

.swap-col{ display: flex; align-items: center; justify-content: center; padding-bottom: 2px; }
.swap-btn{
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  color: var(--accent); font-size: 17px; cursor: pointer; transition: filter .15s ease;
}
.swap-btn:hover{ filter: brightness(0.96); background: var(--accent-soft); }

.note{ margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.6; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }