.brand { display: flex; align-items: center; gap: var(--sp-8); font-weight: 700; font-size: 1.25rem; color: var(--text-primary); }
.brand-logo { color: var(--primary); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-16); border-radius: var(--rad-8); font-weight: 500;
  transition: var(--transition-fast); text-align: center;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface-elevated); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--text-secondary); }
.btn-text { color: var(--text-primary); }
.btn-text:hover { color: var(--primary); }
.btn-large { padding: var(--sp-12) var(--sp-24); font-size: 1.125rem; }
.btn-sm { padding: var(--sp-4) var(--sp-8); font-size: 0.75rem; }

.icon-btn { padding: var(--sp-8); border-radius: var(--rad-8); display: flex; align-items: center; gap: var(--sp-4); color: var(--text-secondary); }
.icon-btn:hover { background: var(--surface-elevated); color: var(--text-primary); }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: 100%; margin-top: var(--sp-8);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--rad-8);
  box-shadow: var(--shadow-md); min-width: 160px; z-index: var(--z-dropdown);
  display: none; flex-direction: column; padding: var(--sp-8) 0; max-height: 300px; overflow-y: auto;
}
.dropdown-menu.show { display: flex; }
.dropdown-menu.top-placement { top: auto; bottom: 100%; margin-top: 0; margin-bottom: var(--sp-8); }
.dropdown-menu button {
  width: 100%; text-align: left; padding: var(--sp-8) var(--sp-16);
  display: flex; align-items: center; gap: var(--sp-8); color: var(--text-primary);
}
.dropdown-menu button:hover, .dropdown-menu button:focus { background: var(--surface-elevated); }
.dropdown-menu button.active { color: var(--primary); font-weight: 600; }

.badge {
  display: inline-block; padding: 2px var(--sp-8); border-radius: var(--rad-full);
  font-size: 0.75rem; font-weight: 500; background: var(--surface-elevated); color: var(--text-secondary); border: 1px solid var(--border);
}
.badge-warn { background: rgba(245, 185, 66, 0.1); color: var(--warning); border-color: rgba(245, 185, 66, 0.2); }
.badge-blue { background: rgba(79, 124, 255, 0.1); color: var(--primary); border-color: rgba(79, 124, 255, 0.2); }
.badge-sm { font-size: 0.65rem; padding: 1px var(--sp-4); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rad-16); padding: var(--sp-24); transition: var(--transition-fast); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--primary); }

.tabs { display: flex; gap: var(--sp-16); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-24); overflow-x: auto; }
.tabs button { padding: var(--sp-12) 0; color: var(--text-secondary); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.market-table-container { overflow-x: auto; }
.market-table { width: 100%; border-collapse: collapse; text-align: left; }
.market-table th, .market-table td { padding: var(--sp-16); border-bottom: 1px solid var(--border); }
.market-table th { color: var(--text-secondary); font-weight: 500; font-size: 0.875rem; }
.market-table tr:hover td { background: var(--surface-elevated); }

.accordion { border: 1px solid var(--border); border-radius: var(--rad-12); overflow: hidden; }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }
.acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--sp-20); font-weight: 500; background: var(--surface); }
.acc-btn:hover { background: var(--surface-elevated); }
.acc-panel { padding: 0 var(--sp-20) var(--sp-20); background: var(--surface); color: var(--text-secondary); display: none; }
.acc-btn[aria-expanded="true"] + .acc-panel { display: block; }
.acc-btn[aria-expanded="true"] .acc-icon { transform: rotate(180deg); }
.acc-icon { transition: var(--transition-fast); }

.positive { color: var(--success); }
.negative { color: var(--danger); }
.disabled-link { opacity: 0.6; cursor: not-allowed; display: inline-flex; align-items: center; gap: var(--sp-8); }

/* Coin Icons and Identity */
.coin-icon { display: inline-block; flex-shrink: 0; border-radius: 50%; }
.coin-icon--sm { width: 24px; height: 24px; }
.coin-icon--md { width: 32px; height: 32px; }
.coin-icon--lg { width: 40px; height: 40px; }

.coin-fallback {
  background: var(--surface-elevated); color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; text-transform: uppercase; border: 1px solid var(--border);
}

.coin-identity { display: flex; align-items: center; gap: var(--sp-12); font-weight: 600; }
.coin-identity__text { display: flex; flex-direction: column; line-height: 1.2; }
.coin-identity__symbol { font-size: 1rem; color: var(--text-primary); }
.coin-identity__name { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; }