:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07111f;
  color: #e8eef7;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 10%, #163457 0, transparent 38%), #07111f; }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 620px); padding: clamp(28px, 5vw, 52px); border: 1px solid #29445f; border-radius: 24px; background: rgba(10, 25, 42, .92); box-shadow: 0 28px 80px rgba(0,0,0,.4); }
.eyebrow { margin: 0 0 12px; color: #69d7c8; font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.5rem); line-height: .98; letter-spacing: -.04em; }
.intro { margin: 18px 0 34px; color: #a9b8c8; line-height: 1.55; }
label { display: block; margin: 0 0 8px; color: #c9d5e2; font-size: .85rem; font-weight: 700; }
input, select { width: 100%; min-height: 52px; border: 1px solid #35516c; border-radius: 12px; padding: 0 14px; background: #0c1c2d; color: #f5f8fc; font: inherit; }
input:focus, select:focus, button:focus-visible { outline: 3px solid rgba(105,215,200,.35); border-color: #69d7c8; }
.unit-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; margin: 20px 0; }
button { cursor: pointer; font: inherit; font-weight: 800; }
.swap { width: 52px; height: 52px; border: 1px solid #35516c; border-radius: 12px; background: #10263c; color: #69d7c8; font-size: 1.4rem; }
.primary { width: 100%; min-height: 54px; border: 0; border-radius: 12px; background: #69d7c8; color: #07111f; }
.primary:hover { background: #8be4d8; }
.result { margin-top: 24px; padding: 20px; border-radius: 14px; background: #071624; border-left: 4px solid #69d7c8; }
.result-label { display: block; color: #91a5b9; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.result strong { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: clamp(1.4rem, 5vw, 2rem); }
.result.error { border-color: #ff7b7b; }
@media (max-width: 520px) { .unit-grid { grid-template-columns: 1fr; } .swap { width: 100%; } }