@keyframes tickerScroll { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:.15 } }
@keyframes wiggle { 0%,100% { transform:rotate(-8deg) scale(1) } 50% { transform:rotate(8deg) scale(1.15) } }
@keyframes mascotBounce { 0%,100% { transform:translateY(0) rotate(0deg) } 25% { transform:translateY(-8px) rotate(-3deg) } 75% { transform:translateY(-4px) rotate(3deg) } }
@keyframes moneyFly { 0% { opacity:1;transform:translate(0,0) rotate(0deg) scale(1) } 100% { opacity:0;transform:translate(var(--vx),var(--vy)) rotate(720deg) scale(.3) } }
@keyframes tradeGlow { 0%,100% { box-shadow:0 0 4px rgba(37,99,235,.3);transform:scale(1) } 50% { box-shadow:0 0 12px rgba(37,99,235,.6);transform:scale(1.03) } }

* { box-sizing:border-box; margin:0; padding:0 }
table tr:hover { background:#f0f7ff !important }
input::placeholder { color:#bbb }
input:focus { outline:none; border-color:#2563eb !important; box-shadow:0 0 0 2px rgba(37,99,235,.12) !important }
button { cursor:pointer; transition:filter .1s }
button:hover:not(:disabled) { filter:brightness(.92) }
::-webkit-scrollbar { height:10px; width:10px }
::-webkit-scrollbar-track { background:#eee; border:1px solid #ddd }
::-webkit-scrollbar-thumb { background:#bbb; border:1px solid #aaa }
::selection { background:#2563eb; color:#fff }

@media (max-width: 768px) {
  .sp500-table table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  .sp500-table table thead th:nth-child(1),
  .sp500-table table tbody td:nth-child(1) {
    width: 24px !important;
    padding: 4px 1px !important;
  }
  .sp500-table table thead th:nth-child(2),
  .sp500-table table tbody td:nth-child(2) {
    width: 32% !important;
    padding: 4px 2px !important;
  }
  .sp500-table table thead th:nth-child(3),
  .sp500-table table tbody td:nth-child(3) {
    width: 20% !important;
    padding: 4px 2px !important;
  }
  .sp500-table table thead th:nth-child(4),
  .sp500-table table tbody td:nth-child(4) {
    width: 16% !important;
    padding: 4px 2px !important;
  }
  .sp500-table table thead th:nth-child(5),
  .sp500-table table tbody td:nth-child(5) {
    width: 18% !important;
    padding: 4px 2px !important;
  }
  .sp500-table table thead th:nth-child(n+6),
  .sp500-table table tbody td:nth-child(n+6) {
    display: none !important;
  }
  .sp500-table table th {
    font-size: 7px !important;
  }
  .sp500-table table td {
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* HIP-3 table - show MARKET, PRICE, 24H, OPEN INT. Hide TYPE, VOL, FUNDING, ACTION */
  .hip3-table table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  .hip3-table table thead th:nth-child(1),
  .hip3-table table tbody td:nth-child(1) {
    width: 35% !important;
    padding: 4px 2px !important;
  }
  .hip3-table table thead th:nth-child(2),
  .hip3-table table tbody td:nth-child(2) {
    display: none !important;
  }
  .hip3-table table thead th:nth-child(3),
  .hip3-table table tbody td:nth-child(3) {
    width: 22% !important;
    padding: 4px 2px !important;
  }
  .hip3-table table thead th:nth-child(4),
  .hip3-table table tbody td:nth-child(4) {
    width: 18% !important;
    padding: 4px 2px !important;
  }
  .hip3-table table thead th:nth-child(5),
  .hip3-table table tbody td:nth-child(5) {
    width: 20% !important;
    padding: 4px 2px !important;
  }
  .hip3-table table thead th:nth-child(n+6),
  .hip3-table table tbody td:nth-child(n+6) {
    display: none !important;
  }
  .hip3-table table th {
    font-size: 7px !important;
  }
  .hip3-table table td {
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}