:root{
  --bg:#0f1115;
  --card:#161a22;
  --muted:#8b93a6;
  --text:#e7eaf3;
  --pos:#1fb981;
  --neg:#f05454;
  --accent:#536dfe;
  --ring:#2a3140;
  --border:#232938;
}

*{ box-sizing:border-box }

html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

.app-header{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:linear-gradient( to bottom, rgba(15,17,21,.92), rgba(15,17,21,.86) );
  backdrop-filter: blur(6px);
}

.brand{ display:flex; align-items:center; gap:10px }
.brand .logo{ font-size:24px }
.brand h1{ font-size:18px; margin:0 }

.controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }

.search{
  min-width:230px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0b0d12; color:var(--text);
  outline:none;
}
.search:focus{ border-color:var(--accent) }

select{
  padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0b0d12; color:var(--text);
}

.btn, .btn-outline, .icon-btn{
  padding:10px 12px; border-radius:10px; border:1px solid var(--accent); background:var(--accent); color:white; cursor:pointer;
}
.btn-outline{ background:transparent; color:var(--accent) }
.icon-btn{ background:transparent; border:1px solid var(--border); color:var(--muted) }

.container{ max-width:1100px; margin:20px auto; padding:0 16px }

.table-wrap{ background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden }

.table{ width:100%; border-collapse:collapse; font-size:14px }
.table thead{ background:#121620 }
.table th, .table td{ padding:12px 10px; border-bottom:1px solid var(--ring) }
.table td.right, .table th.right{ text-align:right }
.table td.center, .table th.center{ text-align:center }

.coin{
  display:flex; align-items:center; gap:10px; min-width:180px;
}
.coin img{ width:22px; height:22px; border-radius:50% }
.coin .sym{ color:var(--muted); font-size:12px; text-transform:uppercase }

.chg-pos{ color:var(--pos); font-weight:600 }
.chg-neg{ color:var(--neg); font-weight:600 }
.watch{
  border:1px solid var(--ring); border-radius:8px; padding:6px 8px; cursor:pointer; background:#0b0d12;
}
.watch.active{ color:#ffd23f; border-color:#ffd23f }

.status{
  padding:16px; text-align:center; color:var(--muted);
}

.footer{ padding:20px 16px; text-align:center; color:var(--muted) }

.modal{
  border:none; border-radius:14px; padding:0; width:min(820px, 92vw);
  background:var(--card); color:var(--text);
}
.modal::backdrop{ background:rgba(0,0,0,.6) }
.modal-content{ margin:0 }
.modal-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--ring);
}
.subtle{ color:var(--muted); margin:6px 0 0 }