@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;300;400;500;600;700&family=IBM+Plex+Mono:wght@200;300;400;500;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0e14;--bg2:#0d1117;--bg3:#161b22;--bg4:#1c2128;
  --fg:#c9d1d9;--fg2:#8b949e;--fg3:#484f58;
  --green:#3fb950;--green2:#238636;--green-bg:rgba(63,185,80,.08);
  --red:#f85149;--red2:#da3633;--red-bg:rgba(248,81,73,.08);
  --blue:#58a6ff;--blue2:#1f6feb;--blue-bg:rgba(88,166,255,.08);
  --yellow:#d29922;--yellow-bg:rgba(210,153,34,.08);
  --cyan:#39c5cf;--purple:#bc8cff;
  --border:#21262d;--border2:#30363d;
  --glow:rgba(63,185,80,.15);
}
body{
  font-family:'JetBrains Mono','IBM Plex Mono',monospace;
  background:var(--bg);color:var(--fg);
  min-height:100vh;overflow-x:hidden;
  line-height:1.6;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);
}

/* Scanline effect */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.02) 1px,rgba(0,0,0,.02) 2px);
}

.container{max-width:960px;margin:0 auto;padding:20px;position:relative;z-index:1}

/* Header */
.hdr{padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.hdr-left{display:flex;align-items:center;gap:12px}
.logo{font-size:1.1rem;font-weight:700;color:var(--green);letter-spacing:.05em}
.logo span{color:var(--fg3)}
.ver{font-size:.6rem;color:var(--fg3);background:var(--bg3);padding:2px 6px;border:1px solid var(--border)}
.hdr-right{display:flex;align-items:center;gap:12px}
.status{display:flex;align-items:center;gap:6px;font-size:.65rem;color:var(--fg2)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.last-update{font-size:.6rem;color:var(--fg3)}

/* Mute button */
.mute-btn{
  width:32px;height:32px;border:1px solid var(--border2);background:var(--bg3);
  color:var(--fg2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;transition:all .2s;font-family:inherit;flex-shrink:0;
}
.mute-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.mute-btn.muted{color:var(--fg3);opacity:.5}
.mute-btn.muted:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);opacity:1}

/* ASCII border helpers */
.box{background:var(--bg2);border:1px solid var(--border);position:relative;transition:border-color .3s}
.box:hover{border-color:var(--border2)}
.box-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg3)}
.box-hdr .tag{font-size:.55rem;font-weight:600;color:var(--fg3);letter-spacing:.15em;text-transform:uppercase}
.box-hdr .tag .hl{color:var(--green)}
.box-body{padding:14px}

/* Converter Section */
.conv{margin-bottom:20px}
.conv-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
.conv-side{padding:20px}
.conv-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px;min-width:60px}
.swap-btn{
  width:40px;height:40px;border:1px solid var(--border2);background:var(--bg3);
  color:var(--fg2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:all .2s;font-family:inherit;
}
.swap-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.swap-btn:active{transform:scale(.95)}
.swap-arrow{font-size:.7rem;color:var(--fg3);margin-top:4px}

.cur-select{
  width:100%;background:var(--bg);border:1px solid var(--border);color:var(--fg);
  font-family:inherit;font-size:.85rem;padding:8px 10px;outline:none;
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23484f58' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.cur-select:focus{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.cur-select option{background:var(--bg2);color:var(--fg)}

.amt-input{
  width:100%;background:transparent;border:none;color:var(--green);
  font-family:inherit;font-size:2rem;font-weight:300;padding:8px 0;
  outline:none;border-bottom:2px solid var(--border);
  transition:border-color .3s;
}
.amt-input:focus{border-bottom-color:var(--green)}
.amt-input::placeholder{color:var(--fg3)}
.amt-label{font-size:.55rem;color:var(--fg3);letter-spacing:.1em;margin-bottom:4px;text-transform:uppercase}

/* Flag display */
.flag-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.flag-emoji{font-size:1.6rem;line-height:1;filter:saturate(.85)}
.flag-code{font-size:.65rem;font-weight:600;color:var(--fg);letter-spacing:.08em}
.flag-name{font-size:.5rem;color:var(--fg3);font-weight:300;letter-spacing:.03em}

.result-val{font-size:2rem;font-weight:300;color:var(--cyan);padding:8px 0;min-height:52px;word-break:break-all}
.result-rate{font-size:.65rem;color:var(--fg2);margin-top:4px}
.result-rate .inv{color:var(--fg3);margin-left:12px}

/* Quick amounts */
.quick-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.quick-btn{
  font-family:inherit;font-size:.6rem;padding:3px 8px;
  background:var(--bg);border:1px solid var(--border);color:var(--fg2);
  cursor:pointer;transition:all .2s;
}
.quick-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}

/* Rate display bar */
.rate-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;border-top:1px solid var(--border);
  background:var(--bg3);font-size:.6rem;flex-wrap:wrap;gap:4px;
}
.rate-bar .rate-info{color:var(--fg2)}
.rate-bar .rate-info span{color:var(--green);font-weight:500}
.rate-bar .actions{display:flex;gap:8px}
.rate-bar .actions button{
  font-family:inherit;font-size:.55rem;padding:2px 8px;
  background:transparent;border:1px solid var(--border);color:var(--fg3);
  cursor:pointer;transition:all .2s;
}
.rate-bar .actions button:hover{border-color:var(--fg2);color:var(--fg)}

/* Tracking panel */
.track-section{margin-bottom:20px}
.track-list{display:flex;flex-direction:column;gap:0}
.track-item{
  display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .2s;font-size:.7rem;
}
.track-item:hover{background:var(--bg3)}
.track-item:last-child{border-bottom:none}
.track-pair{font-weight:500;color:var(--fg)}
.track-pair .arrow{color:var(--fg3);margin:0 4px}
.track-rate{color:var(--cyan);font-variant-numeric:tabular-nums;text-align:right}
.track-change{font-size:.6rem;font-variant-numeric:tabular-nums;text-align:right;min-width:60px}
.track-change.up{color:var(--green)}
.track-change.down{color:var(--red)}
.track-change.flat{color:var(--fg3)}
.track-spark{width:60px;height:20px}
.track-actions{display:flex;gap:4px}
.track-del{
  font-family:inherit;font-size:.55rem;padding:1px 5px;
  background:transparent;border:1px solid transparent;color:var(--fg3);
  cursor:pointer;transition:all .2s;
}
.track-del:hover{border-color:var(--red);color:var(--red)}

.add-track{display:flex;gap:6px;padding:10px 14px;align-items:center}
.add-track select{
  flex:1;background:var(--bg);border:1px solid var(--border);color:var(--fg);
  font-family:inherit;font-size:.65rem;padding:5px 8px;outline:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23484f58' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;
}
.add-track-btn{
  font-family:inherit;font-size:.65rem;padding:5px 12px;
  background:var(--green-bg);border:1px solid var(--green2);color:var(--green);
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.add-track-btn:hover{background:var(--green2);color:#fff}

/* Chart section */
.chart-section{margin-bottom:20px}
.chart-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chart-btn{
  font-family:inherit;font-size:.55rem;padding:3px 10px;
  background:transparent;border:1px solid var(--border);color:var(--fg3);
  cursor:pointer;transition:all .2s;
}
.chart-btn:hover,.chart-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
/* Chart canvas */
.chart-canvas-wrap{position:relative;width:100%;height:220px;padding:0}
#chartCanvas{width:100%;height:100%;cursor:crosshair;display:block}
.chart-tooltip{
  position:absolute;pointer-events:none;background:var(--bg3);border:1px solid var(--border2);
  padding:6px 10px;font-size:.6rem;color:var(--fg);white-space:nowrap;
  opacity:0;transition:opacity .15s;z-index:10;
}
.chart-tooltip.show{opacity:1}
.chart-tooltip .tt-date{color:var(--fg3);font-size:.5rem;letter-spacing:.05em}
.chart-tooltip .tt-rate{color:var(--cyan);font-size:.75rem;font-weight:500;margin-top:2px}
.chart-tooltip .tt-dot{display:inline-block;width:6px;height:6px;background:var(--cyan);margin-right:4px;vertical-align:middle}
.chart-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;padding:10px 14px;border-top:1px solid var(--border)}
.stat-item{text-align:center}
.stat-label{font-size:.5rem;color:var(--fg3);letter-spacing:.1em;text-transform:uppercase}
.stat-val{font-size:.85rem;font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums;margin-top:2px}
.stat-val.up{color:var(--green)}
.stat-val.down{color:var(--red)}

/* Multi compare */
.compare-section{margin-bottom:20px}
.compare-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:14px}
.compare-card{
  background:var(--bg);border:1px solid var(--border);padding:10px;
  transition:all .2s;cursor:default;
}
.compare-card:hover{border-color:var(--border2)}
.compare-cur{font-size:.7rem;font-weight:600;color:var(--fg)}
.compare-amt{font-size:1rem;font-weight:300;color:var(--cyan);margin:4px 0;font-variant-numeric:tabular-nums}
.compare-rate{font-size:.55rem;color:var(--fg3)}

/* Footer */
.ftr{padding:16px 0;border-top:1px solid var(--border);margin-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.ftr-text{font-size:.5rem;color:var(--fg3);letter-spacing:.05em}
.ftr-text a{color:var(--fg3);text-decoration:none;border-bottom:1px dashed var(--fg3)}
.ftr-text a:hover{color:var(--fg2)}

/* Toast */
.toast{
  position:fixed;bottom:20px;right:20px;z-index:100;
  background:var(--bg3);border:1px solid var(--green);color:var(--green);
  padding:8px 16px;font-family:inherit;font-size:.65rem;
  transform:translateY(100px);opacity:0;transition:all .3s ease;
}
.toast.show{transform:translateY(0);opacity:1}

/* Loading */
.loading{display:inline-flex;gap:3px;align-items:center}
.loading span{display:inline-block;width:4px;height:4px;background:var(--fg3);animation:loadBounce .6s ease infinite}
.loading span:nth-child(2){animation-delay:.1s}
.loading span:nth-child(3){animation-delay:.2s}
@keyframes loadBounce{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-4px);opacity:1}}

/* Empty state */
.empty-state{text-align:center;padding:20px;color:var(--fg3);font-size:.65rem}
.empty-state .ascii-art{font-size:.5rem;line-height:1.3;margin-bottom:8px;color:var(--fg3);opacity:.5}

/* Responsive */
@media(max-width:640px){
  .container{padding:12px}
  .conv-grid{grid-template-columns:1fr;gap:0}
  .conv-mid{flex-direction:row;padding:8px 20px;min-width:auto}
  .swap-arrow{transform:rotate(90deg)}
  .amt-input,.result-val{font-size:1.4rem}
  .compare-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .chart-canvas-wrap{height:160px}
  .track-item{grid-template-columns:1fr auto auto;gap:8px}
  .track-spark{display:none}
}