*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0d14;--surface:#16161f;--surface2:#1e1e2a;--surface3:#252535;
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.14);
  --text:#eeeef5;--muted:#6868a0;--muted2:#9898c0;
  --teal:#5ecfb0;--teal2:#3db898;--teal-glow:rgba(94,207,176,0.15);
  --gold:#e8c97a;--gold2:#f5e0a0;
  --rose:#e87a9a;--rose-bg:rgba(232,122,154,0.07);--rose-border:rgba(232,122,154,0.2);
  --green-bg:rgba(94,207,176,0.07);--green-border:rgba(94,207,176,0.18);
  --syne:'Syne',sans-serif;--dm:'DM Sans',sans-serif;
  --fs:1rem;--radius:14px;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);font-family:var(--dm);color:var(--text);
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;padding:1rem 1rem 3rem;
  font-size:var(--fs);
}

/* ── FONT SIZE ── */
body.fs-md{--fs:1.1rem}
body.fs-lg{--fs:1.22rem}

/* ── TOP BAR ── */
.topbar{
  width:100%;max-width:520px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.6rem 0;margin-bottom:0.75rem;gap:0.5rem;
}
.topbar-left{display:flex;align-items:center;gap:0.4rem}
.fs-controls{display:flex;gap:0.3rem}
.fs-btn{
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:0.3rem 0.55rem;
  font-family:var(--dm);font-weight:500;color:var(--muted2);
  cursor:pointer;transition:all 0.15s;line-height:1;
}
.fs-btn:hover{border-color:var(--border2);color:var(--text)}
.fs-btn.active{background:var(--surface3);border-color:var(--teal);color:var(--teal)}
.fs-label{font-size:0.65rem;color:var(--muted);font-family:var(--syne);letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap}

/* ── LANG BAR ── */
.lang-scroll{
  width:100%;max-width:520px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-bottom:1rem;
  scrollbar-width:none;
}
.lang-scroll::-webkit-scrollbar{display:none}
.lang-bar{display:flex;gap:0.35rem;padding-bottom:2px;width:max-content}
.lang-btn{
  background:var(--surface);border:1px solid var(--border);
  border-radius:100px;padding:0.28rem 0.7rem;
  font-family:var(--dm);font-size:0.7rem;color:var(--muted2);
  cursor:pointer;transition:all 0.15s;white-space:nowrap;letter-spacing:0.02em;
  flex-shrink:0;
}
.lang-btn:hover{border-color:var(--border2);color:var(--text)}
.lang-btn.active{background:linear-gradient(135deg,var(--teal2),#2a9a80);border-color:transparent;color:#fff;font-weight:500}

/* ── CARD ── */
.card{
  width:100%;max-width:520px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
  animation:fadeUp 0.5s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Header */
.card-header{
  padding:1.4rem 1.5rem 1.2rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(94,207,176,0.04) 0%,transparent 100%);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:0.6rem}
.brand-icon{
  width:34px;height:34px;min-width:34px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:0.95rem;box-shadow:0 4px 12px rgba(94,207,176,0.25);
}
.brand-text h1{font-family:var(--syne);font-size:1em;font-weight:700;color:var(--text);line-height:1.1}
.brand-text span{font-size:0.7em;color:var(--muted);letter-spacing:0.04em}
.live-badge{
  display:flex;align-items:center;gap:0.3rem;flex-shrink:0;
  background:rgba(94,207,176,0.08);border:1px solid rgba(94,207,176,0.2);
  border-radius:100px;padding:0.28rem 0.65rem;
  font-size:0.65em;color:var(--teal);font-family:var(--dm);font-weight:500;letter-spacing:0.04em;
}
.live-dot{width:5px;height:5px;background:var(--teal);border-radius:50%;animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* Body */
.card-body{padding:1.4rem 1.5rem}

/* API selector */
.api-section{margin-bottom:1.2rem}
.section-label{
  font-size:0.65em;font-family:var(--syne);text-transform:uppercase;
  letter-spacing:0.1em;color:var(--muted);margin-bottom:0.5rem;display:block;
}
.api-tabs{display:flex;gap:0.4rem;flex-wrap:wrap}
.api-tab{
  flex:1;min-width:0;
  padding:0.55rem 0.4rem;text-align:center;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:10px;font-family:var(--dm);font-size:0.75em;
  font-weight:500;color:var(--muted2);cursor:pointer;transition:all 0.15s;
}
.api-tab:hover{border-color:var(--border2);color:var(--text)}
.api-tab.active{background:var(--teal-glow);border-color:var(--teal);color:var(--teal)}

/* Amount */
.field{margin-bottom:1rem}
.input-row{position:relative}
.amount-input{
  width:100%;padding:0.85rem 1rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);font-family:var(--syne);
  font-size:1.35em;font-weight:700;color:var(--text);
  outline:none;transition:border-color 0.15s;appearance:none;
}
.amount-input:focus{border-color:rgba(94,207,176,0.4)}
.amount-input::placeholder{color:var(--muted);font-weight:400;font-size:0.75em}

/* Currency row */
.currency-row{display:grid;grid-template-columns:1fr 40px 1fr;gap:0.5rem;align-items:end;margin-bottom:1.1rem}
.select-wrap{position:relative}
.select-wrap::after{
  content:'▾';position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:0.65em;pointer-events:none;
}
.currency-select{
  width:100%;padding:0.7rem 2rem 0.7rem 0.85rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);font-family:var(--dm);
  font-size:0.85em;font-weight:500;color:var(--text);
  outline:none;cursor:pointer;transition:border-color 0.15s;appearance:none;
}
.currency-select:focus{border-color:rgba(94,207,176,0.4)}
.currency-select option{background:#1e1e2a}

.swap-btn{
  width:40px;height:40px;background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--radius);
  cursor:pointer;font-size:0.95rem;color:var(--muted2);
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.swap-btn:hover{background:var(--teal-glow);border-color:var(--teal);color:var(--teal);transform:rotate(180deg)}

/* Convert + Refresh */
.action-row{display:flex;gap:0.5rem;margin-top:0.2rem}
.convert-btn{
  flex:1;padding:0.85rem;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  border:none;border-radius:var(--radius);
  font-family:var(--syne);font-size:0.85em;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;color:#0a0a0f;
  cursor:pointer;transition:all 0.18s;
  box-shadow:0 6px 20px rgba(94,207,176,0.2);
}
.convert-btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(94,207,176,0.3)}
.convert-btn:active{transform:translateY(0)}
.convert-btn:disabled{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none}

.refresh-btn{
  width:48px;height:48px;flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);cursor:pointer;
  font-size:1rem;color:var(--muted2);
  display:flex;align-items:center;justify-content:center;
  transition:all 0.18s;
}
.refresh-btn:hover{background:var(--teal-glow);border-color:var(--teal);color:var(--teal)}
.refresh-btn.spinning svg{animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Status bar */
.status-bar{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:0.8rem;padding:0.6rem 0.75rem;
  background:var(--surface2);border-radius:10px;
  font-size:0.7em;font-family:var(--dm);
}
.status-left{color:var(--muted2);display:flex;align-items:center;gap:0.4rem}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0}
.status-dot.ok{background:var(--teal)}
.status-dot.err{background:var(--rose)}
.status-dot.loading{background:var(--gold);animation:pulse 1s ease infinite}
.status-right{color:var(--muted);font-size:0.95em}

/* Result */
.result{
  display:none;margin-top:1rem;
  background:var(--green-bg);border:1px solid var(--green-border);
  border-radius:var(--radius);padding:1.1rem 1.3rem;
  animation:popIn 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}
.result.show{display:block}
@keyframes popIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
.result-label{font-size:0.65em;font-family:var(--syne);text-transform:uppercase;letter-spacing:0.1em;color:var(--teal);margin-bottom:0.4rem}
.result-amount{
  font-family:var(--syne);font-size:1.9em;font-weight:800;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.1;margin-bottom:0.35rem;
}
.result-rate{font-size:0.75em;color:var(--muted2)}
.result-rate strong{color:var(--teal);font-weight:500}

/* Error */
.error-box{
  display:none;margin-top:1rem;
  background:var(--rose-bg);border:1px solid var(--rose-border);
  border-radius:var(--radius);padding:0.9rem 1.1rem;
  font-size:0.82em;color:var(--rose);font-family:var(--dm);line-height:1.5;
}
.error-box.show{display:block}
.error-suggestion{margin-top:0.4rem;font-size:0.92em;color:var(--muted2)}

/* Footer */
.footer{margin-top:1.2rem;text-align:center;font-size:0.68em;color:var(--muted);font-family:var(--dm)}

/* ── MOBILE ── */
@media(max-width:400px){
  .card-body{padding:1.1rem}
  .card-header{padding:1.1rem}
  .result-amount{font-size:1.6em}
  .api-tab{font-size:0.7em;padding:0.5rem 0.3rem}
}