
<style>
  :root{
    --coin-fg: #e6eef7; --coin-muted: #0e6cf8ff; --coin-accent: #4cc38a; --coin-card: #7a8fa5ff;
  }
  /*body{background:var(--coin-bg); color:var(--coin-fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }*/

  /* ===== ticker ===== */
  .coin-ticker-wrap{
    height: 60px;
    margin-top: 70px;
    position:relative; overflow:hidden; width:100%; user-select:none;
    /*background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);*/
    background: #7a8fa5ff;
    border-top: 3px solid rgb(171, 190, 211);
    border-bottom: 3px solid rgb(171, 190, 211);
  }
  .coin-track{
    display:flex; gap:18px; padding:5px 12px;
    will-change: transform;
    color: #f4f5f7ff;
  }
.coin-track img {
    filter: grayscale(100%) contrast(0.7) brightness(1.6);;
}
.coin-item{
    display:flex; align-items:center; gap:10px;
    background:var(--coin-card); border:1px solid rgba(255,255,255,.0);
    border-radius:14px; padding:10px 12px; cursor:pointer; white-space:nowrap;
    /*box-shadow:0 6px 18px rgba(0,0,0,.25);*/
    transition:transform .18s ease, border-color .18s ease;
  }
  .coin-item:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.12); background:"rgba(255,255,255,.06)"; }
  .coin-logo{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
  .coin-symbol{ font-weight:700; letter-spacing:.3px; }
  .coin-price{ color:var(--coin-muted); font-size:.9rem; }

  /* ===== modal ===== */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.55);
    display:none; align-items:center; justify-content:center; z-index:999;
  }
  .modal-backdrop.show{ display:flex; }
  .modal{
    width:min(680px, calc(100% - 32px)); background:var(--coin-card); color:var(--coin-fg);
    border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px;
    box-shadow:0 20px 70px rgba(0,0,0,.45);
    opacity:0; transform:translateY(10px) scale(.98);
    animation:pop .18s ease forwards;
  }
  @keyframes pop{ to { opacity:1; transform:translateY(0) scale(1);} }
  .modal-header{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
  .modal-header img{ width:40px; height:40px; border-radius:50%; }
  .modal-title{ font-size:1.15rem; font-weight:800; letter-spacing:.2px; }
  .modal-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0 6px;
  }
  /*.card{
    background:#0e141c; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px;
  }*/
  .k{ color:var(--coin-muted); font-size:.85rem; }
  .v{ font-size:1.05rem; font-weight:700; margin-top:4px; }
  .modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px; }
  .btn{ padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08); cursor:pointer; }
  .btn.primary{ background:var(--coin-accent); color:#082017; border:none; font-weight:800; }
  .btn.ghost{ background:transparent; color:var(--coin-fg); }
  @media (max-width:640px){ .modal-grid{ grid-template-columns:1fr; } }
</style>
