/* Design tokens: change colors here to re-theme the whole site */
:root { --bg1:#3a1c8f; --bg2:#1a6fe0; --card:rgba(255,255,255,.14); --border:rgba(255,255,255,.28);
  --text:#fff; --muted:rgba(255,255,255,.72); --accent:#8ab4ff; --up:#3ddc97; --down:#ff6b6b; }
[data-theme="light"] { --bg1:#c9d9ff; --bg2:#e6d9ff; --card:rgba(255,255,255,.65); --border:rgba(80,80,160,.2);
  --text:#1c1b3a; --muted:#57567a; --accent:#4a4ae0; --down:#d63a3a; --up:#12945f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; font-family:'Poppins',sans-serif; color:var(--text);
  background:linear-gradient(135deg,var(--bg1),var(--bg2)) fixed; overflow-x:hidden; }
.shape { position:fixed; border-radius:50%; opacity:.35; z-index:0; animation:float 12s ease-in-out infinite; }
.s1 { width:280px; height:280px; background:#7c5cff; top:-60px; left:-60px; }
.s2 { width:200px; height:200px; background:#38b6ff; bottom:8%; right:-40px; animation-delay:-4s; }
.s3 { width:120px; height:120px; background:#ff8ad8; top:45%; left:8%; animation-delay:-8s; }
@keyframes float { 50% { transform:translateY(-30px) rotate(10deg); } }
.wrap { position:relative; z-index:1; max-width:960px; margin:0 auto; padding:32px 16px 24px; }
header { text-align:center; margin-bottom:24px; }
h1 { font-size:clamp(1.8rem,5vw,2.8rem); margin:0 0 8px; }
h1 i { color:var(--accent); }
header p { color:var(--muted); margin:0; }
h2 { font-size:1.05rem; margin:0 0 12px; display:flex; justify-content:space-between; align-items:center; }
.glass { background:var(--card); border:1px solid var(--border); border-radius:24px; padding:24px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 12px 40px rgba(20,10,80,.25); }
.converter { max-width:640px; margin:0 auto 24px; animation:rise .7s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(24px); } }
label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px; }
input, select { width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--border);
  background:rgba(255,255,255,.12); color:var(--text); font:inherit; }
select option { color:#111; }
input:focus, select:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.pair { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:end; margin:16px 0; }
.sel { display:flex; align-items:center; gap:8px; }
.sel img { width:28px; height:20px; object-fit:cover; border-radius:4px; }
.search { margin-top:8px; padding:8px 12px; font-size:.85rem; }
button { font:inherit; cursor:pointer; color:var(--text); transition:transform .2s, background .2s; }
.icon-btn { width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:var(--card); }
.icon-btn:hover { transform:scale(1.1); }
.icon-btn.spin i { animation:spin .5s; }
@keyframes spin { to { transform:rotate(180deg); } }
.theme { position:fixed; top:16px; right:16px; z-index:5; }
.primary { width:100%; padding:14px; border:0; border-radius:16px; font-weight:600; font-size:1rem;
  background:linear-gradient(90deg,#6c4bff,#2f8cff); box-shadow:0 8px 20px rgba(80,80,255,.4); color:#fff; }
.primary:hover { transform:translateY(-2px); }
.ghost { background:transparent; border:1px solid var(--border); border-radius:12px; padding:8px 12px; }
.ghost:hover { background:var(--card); }
.small { padding:4px 10px; font-size:.75rem; }
.popular, .chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.chip { padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:transparent; font-size:.85rem; }
.chip:hover { background:var(--card); transform:translateY(-2px); }
.message { color:var(--down); font-size:.9rem; min-height:1.2em; margin:10px 0 0; }
.result { margin-top:16px; padding:18px; border-radius:18px; background:rgba(255,255,255,.1); }
.big { font-size:clamp(1.6rem,6vw,2.4rem); font-weight:700; }
.meta { display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); margin:4px 0; }
.trend.up { color:var(--up); } .trend.down { color:var(--down); }
.actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.hidden { display:none; }
.spinner { width:32px; height:32px; margin:16px auto 0; border:4px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin2 .8s linear infinite; }
@keyframes spin2 { to { transform:rotate(360deg); } }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.list { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.9rem; }
.list li { display:flex; justify-content:space-between; gap:8px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.08); }
footer { text-align:center; margin-top:28px; color:var(--muted); font-size:.85rem; }
@media (max-width:560px) { .pair { grid-template-columns:1fr; } #swapBtn { justify-self:center; transform:rotate(90deg); } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }