* { box-sizing: border-box; }
:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f4f7fb;
}
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  background:
    radial-gradient(circle at 10% 10%, rgba(78, 113, 255, .12), transparent 32%),
    radial-gradient(circle at 90% 90%, rgba(35, 199, 156, .11), transparent 30%),
    #f4f7fb;
}
.converter-card {
  width: min(820px, 100%);
  background: rgba(255,255,255,.94);
  border: 1px solid #e7ebf2;
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 24px 70px rgba(34, 47, 73, .12);
}
.brand-row { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #53617a; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; background: #172033; color: white;
}
.hero { margin: 48px 0 32px; }
.eyebrow { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .13em; font-size: 12px; font-weight: 800; color: #66748e; }
h1 { margin: 0; font-size: clamp(38px, 6vw, 64px); line-height: .99; letter-spacing: -.055em; }
h1 span { color: #536df0; }
.subtitle { margin: 18px 0 0; color: #69758a; font-size: 16px; }
.converter-panel {
  padding: 22px;
  border: 1px solid #e8ecf3;
  border-radius: 20px;
  background: #fafbfd;
}
.field-grid { display: grid; grid-template-columns: 1fr 50px 1fr; gap: 14px; align-items: end; }
.field > span { display:block; margin: 0 0 8px 3px; font-size: 12px; font-weight: 700; color: #66748e; }
.input-wrap {
  display: flex; min-height: 62px; background: white;
  border: 1px solid #dfe5ee; border-radius: 14px; overflow: hidden;
}
input {
  min-width: 0; width: 100%; border: 0; outline: 0; padding: 0 16px;
  font-size: 22px; font-weight: 700; color: #172033; background: transparent;
}
select {
  border: 0; border-left: 1px solid #e7ebf2; outline: 0; padding: 0 12px;
  min-width: 105px; color: #172033; font-weight: 700; background: white;
}
.swap-btn {
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid #dfe5ee;
  background: white; cursor: pointer; font-size: 22px; color: #536df0;
  transition: transform .18s, box-shadow .18s;
}
.swap-btn:hover { transform: rotate(180deg); box-shadow: 0 6px 18px rgba(38,55,94,.12); }
.status-area { min-height: 82px; margin-top: 16px; }
.status {
  display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px;
  border-radius: 13px; border: 1px solid;
}
.status .icon {
  flex: 0 0 auto; width: 28px; height: 28px; display:grid; place-items:center;
  border-radius: 9px; font-weight: 800;
}
.status strong { display:block; font-size: 14px; margin-bottom: 4px; }
.status p { margin: 0; font-size: 13px; line-height: 1.5; }
.status.loading { background:#f2f5ff; border-color:#d8e0ff; }
.status.loading .icon { background:#dfe6ff; color:#536df0; }
.status.error { background:#fff5f4; border-color:#ffd9d5; }
.status.error .icon { background:#ffe1dd; color:#d04b40; }
.status.empty { background:#fffaf0; border-color:#f4dfad; }
.status.empty .icon { background:#ffefc7; color:#9b6b09; }
.status.success { background:#f1fbf7; border-color:#d3f0e5; }
.status.success .icon { background:#d8f4e9; color:#16805d; }
.spinner {
  width: 14px; height: 14px; border: 2px solid #aebcf5; border-top-color:#536df0;
  border-radius:50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.action-row { display:flex; gap:10px; }
.primary-btn, .secondary-btn {
  border: 0; border-radius: 12px; padding: 13px 20px; font-weight: 800; cursor: pointer;
}
.primary-btn { background:#172033; color:white; flex:1; }
.primary-btn:hover { background:#26324b; }
.secondary-btn { background:white; color:#172033; border:1px solid #dfe5ee; }
.hidden { display:none !important; }
.demo-tools {
  margin-top: 20px; padding: 17px 18px; border:1px dashed #cbd3e0; border-radius: 15px;
  display:flex; justify-content:space-between; gap:18px; align-items:center;
}
.demo-tools strong { display:block; font-size:13px; }
.demo-tools span { display:block; color:#7a8599; font-size:11px; margin-top:4px; }
.demo-buttons { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.demo-buttons button {
  border:1px solid #dfe5ee; background:white; color:#53617a; border-radius:9px;
  padding:8px 10px; cursor:pointer; font-size:11px; font-weight:700;
}
.demo-buttons button:hover { border-color:#536df0; color:#536df0; }
footer { margin-top: 22px; display:flex; justify-content:space-between; gap:12px; color:#8993a5; font-size:11px; }
@media (max-width: 650px) {
  .converter-card { padding: 22px; border-radius: 22px; }
  .hero { margin: 34px 0 24px; }
  .field-grid { grid-template-columns: 1fr; }
  .swap-btn { justify-self:center; transform: rotate(90deg); }
  .swap-btn:hover { transform: rotate(270deg); }
  .demo-tools, footer { flex-direction:column; align-items:flex-start; }
  .demo-buttons { justify-content:flex-start; }
}