:root { color-scheme: dark; --bg: #111111; --card: #1c1c1e; --line: #2c2c2e; --text: #ffffff; --muted: #8e8e93; --accent: #5b86e5; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); color: var(--text); }
body {
  font: 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
main {
  height: 100vh; height: 100dvh; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
button { font: inherit; color: inherit; background: var(--card); border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:active { background: var(--line); }

.pair { position: relative; display: grid; gap: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 88px; padding: 0 20px; background: var(--card); border-radius: 20px; }
.code { font-size: 17px; font-weight: 600; }
.amt { min-width: 0; font-size: 40px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amt.msg { font-size: 15px; font-weight: 400; color: var(--muted); white-space: normal; text-align: right; }
#swap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--bg);
  display: grid; place-items: center; color: var(--accent);
}

.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chips button { height: 40px; border-radius: 20px; font-size: 15px; font-weight: 600; color: var(--muted); }
.chips [aria-pressed=true] { background: var(--accent); color: var(--text); }
#rate { min-height: 16px; text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.pad button { height: clamp(52px, 10dvh, 76px); border-radius: 16px; font-size: 28px; font-weight: 500; display: grid; place-items: center; }