:root{
  --bg:#f6f7fb; --card:#fff; --ink:#101426; --muted:#5b6478;
  --line:#e6e8ef; --accent:#2563eb; --accent-ink:#fff; --ok:#16a34a;
  --shadow:0 1px 2px rgba(16,20,38,.04), 0 8px 24px rgba(16,20,38,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px; margin:0 auto; padding:0 20px}

.topbar{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5}
.topbar .wrap{display:flex; align-items:center; gap:24px; height:56px}
.brand{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; font-size:16px}
.brand svg{color:var(--accent)}
.topbar nav{display:flex; gap:18px; margin-left:auto}
.topbar nav a{color:var(--muted); font-weight:500}
.topbar nav a:hover{color:var(--ink); text-decoration:none}

h1{font-size:30px; line-height:1.2; margin:28px 0 4px}
.lead{color:var(--muted); margin:0 0 18px}

.converter{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow)}
.row{display:grid; grid-template-columns: 1fr 1fr auto 1fr; gap:10px; align-items:end}
.field{display:flex; flex-direction:column; gap:6px}
.field span{font-size:12px; color:var(--muted); letter-spacing:.02em}
.field input, .field select{
  font:inherit; color:var(--ink);
  background:#fbfbfd; border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; outline:none; width:100%;
}
.field input:focus, .field select:focus{border-color:var(--accent); background:#fff}
.swap{
  background:#fbfbfd; border:1px solid var(--line); border-radius:10px;
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); margin-bottom:0;
}
.swap:hover{color:var(--ink); border-color:#cfd3df}

.result{margin-top:18px; padding:16px; background:#fbfbfd; border:1px solid var(--line); border-radius:12px}
.result__amount{font-size:30px; font-weight:700; letter-spacing:-.01em}
.result__rate{color:var(--muted); margin-top:2px}
.result__updated{margin-top:8px; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px}
.result__updated .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(22,163,74,.15)}

.popular{margin:28px 0}
.popular h2{font-size:18px; margin:0 0 10px}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:0; list-style:none; margin:0}
.grid li{background:#fff; border:1px solid var(--line); border-radius:10px}
.grid a{display:block; padding:10px 12px; color:var(--ink)}
.grid a:hover{background:#fbfbfd; text-decoration:none}

footer{padding:28px 0 36px; color:var(--muted)}

@media (max-width:680px){
  .row{grid-template-columns:1fr 1fr; grid-template-areas:"a a" "f t" "s s"}
  .row > label:nth-child(1){grid-area:a}
  .row > label:nth-child(2){grid-area:f}
  .row > .swap{grid-area:s; width:100%}
  .row > label:nth-child(4){grid-area:t}
  .grid{grid-template-columns:repeat(2,1fr)}
}