:root{--bg:#0b1020;--panel:#121a2d;--panel2:#18233a;--text:#f8fafc;--muted:#9aa8bd;--line:#283550;--accent:#ff7a45;--accent2:#ffb24a;--good:#42d6a4;--shadow:0 22px 70px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 15% -10%,#2b1830 0,transparent 30%),radial-gradient(circle at 95% 10%,#2c2030 0,transparent 25%),var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}.glow{position:fixed;width:320px;height:320px;border-radius:50%;filter:blur(110px);opacity:.12;pointer-events:none}.glow-a{background:var(--accent);top:15%;left:-130px}.glow-b{background:var(--accent2);right:-130px;top:48%}.topbar{height:72px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1100px)/2));background:rgba(11,16,32,.7);backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:900;font-size:20px}.logo{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 24px rgba(255,122,69,.25)}.api-pill{font-size:12px;color:#cbd5e1;border:1px solid var(--line);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.03)}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:6px;box-shadow:0 0 10px var(--good)}.wrap{max-width:1100px;margin:auto;padding:68px 22px}.hero{text-align:center;max-width:780px;margin:0 auto 38px}.eyebrow{color:var(--accent2);font-size:12px;font-weight:900;letter-spacing:.18em}.hero h1{font-size:clamp(38px,7vw,72px);line-height:.98;margin:14px 0 18px;letter-spacing:-.05em}.hero h1 span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{color:var(--muted);font-size:17px;line-height:1.7}.card{background:linear-gradient(145deg,rgba(24,35,58,.95),rgba(18,26,45,.95));border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:var(--shadow)}.converter{max-width:780px;margin:0 auto 72px;padding:28px}.field{display:flex;flex-direction:column;gap:9px;flex:1}.field label{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}input,select{width:100%;border:1px solid var(--line);background:#0e1628;color:#fff;border-radius:14px;padding:15px 16px;font:inherit;outline:none;transition:.2s}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,69,.12)}.amount-field{margin-bottom:18px}.amount-field input{font-size:30px;font-weight:900}.currency-row{display:flex;align-items:flex-end;gap:12px}.swap{width:52px;height:52px;flex:0 0 52px;border-radius:15px;border:1px solid var(--line);background:#202b44;color:#fff;font-size:24px;cursor:pointer;transition:.2s}.swap:hover{transform:rotate(180deg);border-color:var(--accent)}.primary{width:100%;margin-top:20px;border:0;padding:16px;border-radius:15px;font-weight:900;font-size:16px;color:#1b0c05;background:linear-gradient(90deg,var(--accent),var(--accent2));cursor:pointer;box-shadow:0 10px 28px rgba(255,122,69,.22)}.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}.result{margin-top:22px;padding:22px;border-radius:18px;background:rgba(8,13,25,.55);border:1px solid var(--line);text-align:center}.result-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.result-value{font-weight:950;font-size:clamp(28px,6vw,44px);margin:6px 0}.rate-line{color:var(--muted);font-size:13px}.status{min-height:20px;color:#ff9c80;text-align:center;font-size:13px;margin-top:10px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.section-head h2{margin:6px 0 0;font-size:30px}.ghost{color:#fff;background:transparent;border:1px solid var(--line);border-radius:12px;padding:10px 13px;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:34px}.rate-card{padding:18px;border-radius:18px;background:var(--panel);border:1px solid rgba(255,255,255,.07);transition:.2s}.rate-card:hover{transform:translateY(-3px);border-color:#41516f}.pair{font-size:12px;color:var(--muted);font-weight:800}.pair strong{color:#fff}.rate-number{font-size:23px;font-weight:900;margin-top:7px}.rate-date{font-size:11px;color:#728199;margin-top:4px}.info{padding:22px;display:flex;gap:16px;align-items:flex-start}.info-icon{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center;background:rgba(255,122,69,.12)}.info h3{margin:2px 0 6px}.info p{color:var(--muted);line-height:1.6;margin:0;font-size:14px}footer{text-align:center;color:#6e7c92;padding:0 20px 38px;font-size:12px}@media(max-width:760px){.wrap{padding-top:46px}.api-pill{display:none}.converter{padding:20px}.currency-row{display:grid;grid-template-columns:1fr 48px 1fr;gap:8px}.swap{width:48px;height:52px;flex-basis:48px}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:450px){.hero h1{font-size:42px}.currency-row{grid-template-columns:1fr}.swap{width:100%;height:44px}.grid{grid-template-columns:1fr}.section-head{align-items:center}.amount-field input{font-size:26px}}
