:root { --bg: #0b1221; --panel: #121a2b; --text: #e6e8ef; --muted:#9aa0ae; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; height:100%; }
.topbar { position: sticky; top:0; z-index:10; display:flex; align-items:center; gap:16px; padding:10px 16px; background:rgba(11,18,33,0.9); backdrop-filter: blur(6px); border-bottom: 1px solid #1f2a44; }
.topbar .logo { font-weight:700; }
.topbar .controls { display:flex; gap:12px; align-items:center; flex:1; }
.topbar label { display:flex; gap:6px; align-items:center; color:var(--muted); font-size:12px; }
.topbar select, .topbar input[type="search"] { background: var(--panel); color: var(--text); border:1px solid #1f2a44; border-radius:8px; padding:6px 8px; }
.selectors { display:flex; gap:8px; }

.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.bubbles-section.full { position: relative; width:100%; height: calc(100vh - 64px); overflow:hidden; }
.bubbles-section.full > h2 { position:absolute; top:8px; left:16px; z-index:2; margin:0; color: var(--muted); }
.bubbles { position: relative; width: 100%; height: 100%; }
.bubble { position:absolute; border-radius: 999px; border:none; color:#08131a; font-weight:700; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.25); opacity: 0.9; will-change: transform; }
.bubble:hover{ opacity: 1; }
.bubble .sym { font-size: 14px; }
.bubble .ch { font-size: 12px; opacity: 0.85; }

.table-section { margin-top: 24px; background: var(--panel); border:1px solid #1f2a44; border-radius:12px; overflow:hidden; }
.coins-table { width:100%; border-collapse: collapse; }
.coins-table thead { background:#0f1728; }
.coins-table th, .coins-table td { padding:10px 12px; border-bottom: 1px solid #1f2a44; }
.coins-table td.coin { display:flex; gap:8px; align-items:center; }
.coins-table td.coin img { width:20px; height:20px; border-radius:999px; background:#0f1728; }
.coins-table td.up { color:#0ecb81; }
.coins-table td.down { color:#f6465d; }
.muted { color: var(--muted); display:block; padding:8px 12px; }
.legend { padding: 8px 12px; color:var(--muted); }

.coin-panel { position: fixed; right: 16px; bottom: 16px; width: 320px; background: var(--panel); border:1px solid #1f2a44; border-radius:12px; padding:12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.coin-panel .panel-header { display:flex; align-items:center; gap:8px; }
.coin-panel .panel-header img { width:24px; height:24px; border-radius:999px; background:#0f1728; }
.coin-panel .panel-header .close { margin-left:auto; background:#0f1728; color:var(--text); border:none; width:28px; height:28px; border-radius:6px; cursor:pointer; }

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

/* Движение управляет JS через transform */