/* ─── Google Font ─── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');

/* ─── Base Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ─── Market Grid (6-col) ─── */
.market-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr 1.5fr 1.5fr 1.5fr;
  align-items: center;
}
@media (max-width: 767px) {
  .market-grid {
    grid-template-columns: 2fr 2fr 1.5fr;
  }
}

/* ─── Coin Row ─── */
.coin-row {
  display: grid;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  grid-template-columns: 2fr 2fr 1.5fr 1.5fr 1.5fr 1.5fr;
}
.coin-row:hover { background: rgba(255,255,255,0.04); }
.coin-row.active { background: rgba(240,185,11,0.08); }

@media (max-width: 767px) {
  .coin-row {
    grid-template-columns: 2fr 2fr 1.5fr;
  }
  .coin-row .hide-mobile { display: none !important; }
}

/* ─── Price Flash Animation ─── */
@keyframes flash-green {
  0%   { background: rgba(0,176,116,0.35); }
  100% { background: transparent; }
}
@keyframes flash-red {
  0%   { background: rgba(255,59,48,0.35); }
  100% { background: transparent; }
}
.flash-up   { animation: flash-green 0.6s ease-out forwards; border-radius: 4px; }
.flash-down { animation: flash-red   0.6s ease-out forwards; border-radius: 4px; }

/* ─── Sort Buttons ─── */
.sort-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #2a2e35;
  background: transparent;
  color: #848e9c;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  font-size: 11px;
}
.sort-btn:hover, .sort-btn.active {
  background: #f0b90b;
  border-color: #f0b90b;
  color: #0b0e11;
  font-weight: 700;
}

/* ─── Interval Tabs ─── */
.iv-btn {
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid #2a2e35;
  background: transparent;
  color: #848e9c;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.iv-btn:hover, .iv-btn.active {
  background: rgba(240,185,11,0.15);
  border-color: #f0b90b;
  color: #f0b90b;
}

/* ─── Coin Avatar ─── */
.coin-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1e2329, #2a2e35);
  border: 1px solid #2a2e35;
  color: #f0b90b;
}

/* ─── Skeleton Loader ─── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #161a1e 25%, #1e2329 50%, #161a1e 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
  height: 14px;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0b0e11; }
::-webkit-scrollbar-thumb { background: #2a2e35; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3d4249; }

/* ─── WS Dot Pulse ─── */
@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.ws-live { background: #00b074 !important; animation: pulse-green 2s infinite; }
.ws-err  { background: #ff3b30 !important; }

/* ─── Chart Container Loading Overlay ─── */
#chart-container {
  position: relative;
}
#chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #161a1e;
  color: #848e9c;
  font-size: 13px;
  z-index: 10;
  transition: opacity 0.3s;
}
#chart-loading.hidden { opacity: 0; pointer-events: none; }