html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  background-color: #000 !important; 
  margin: 0;
  padding: 0;
}
main {
  flex: 1;
  padding: 2rem 1rem; 
}
.table-description {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #999999;
}
.token-col {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.radar-table {
  width: 100%;
  border-collapse: collapse;
  background-color: transparent;
  table-layout: fixed; 
}

.radar-table th,
.radar-table td {
  padding: 0.75rem 0.5rem; 
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem; 
  position: relative; 
  background-color: transparent;
  white-space: nowrap;
  overflow: hidden; 
  text-overflow: ellipsis;
  vertical-align: middle; 
  text-align: left; 
}

.radar-table thead th {
  background-color: #090909 !important; 
  color: #999999; 
  text-transform: uppercase;
  font-weight: normal; 
  cursor: pointer;
  user-select: none;
  padding: 0.75rem 1rem; 
  border-bottom: 1px solid var(--border-color); 
  overflow: visible; 
}

.radar-table th[data-sort="latestTimestamp"] { width: 10%; } 
.radar-table th[data-sort="tokenName"] { width: 25%; } 
.radar-table th[data-sort="pairCreatedAt"] { width: 7%; }
.radar-table th[data-sort="priceUsd"] { width: 12%; }
.radar-table th[data-sort="marketCap"] { width: 11%; }
.radar-table th[data-sort="volumeH24"] { width: 10%; }
.radar-table th[data-sort="priceChangeH1"] { width: 8%; text-align: center; }
.radar-table th[data-sort="pumpSM"] { width: 5%; text-align: center; }
.radar-table th[data-sort="social"] { width: 7%; }
.radar-table th[data-sort="actions"] { width: 10%; text-align: center; }


.radar-table tbody td {
  padding: 0.75rem 1rem; 
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  background-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white; 
  vertical-align: middle; 
}

.radar-table tbody td.price-cell {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.radar-table tbody td.price-cell:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.radar-table tbody td:nth-child(1),  
.radar-table tbody td:nth-child(3),  
.radar-table tbody td:nth-child(8), 
.radar-table tbody td:nth-child(10) 
{
   text-align: center;
}

.radar-table tbody td:nth-child(7)  
{
   text-align: center !important; 
}

.radar-table tbody td:nth-child(4),
.radar-table tbody td:nth-child(5),
.radar-table tbody td:nth-child(6)
{
    text-align: right; 
}

.radar-table tbody td:nth-child(10) a { 
    color: var(--link-color) !important; 
    text-decoration: none;
    transition: color 0.2s ease;
}
.radar-table tbody td:nth-child(10) a:hover {
    color: var(--link-hover-color); 
}

.radar-table tbody td.positive-change { color: var(--positive-change); }
.radar-table tbody td.negative-change { color: var(--negative-change); }
.radar-table tbody td.neutral-change { color: var(--text-secondary); }

.radar-table tbody tr:hover {
  background-color: var(--hover-bg);
  transition: background-color 0.3s ease;
}

.sort-indicator { 
  margin-left: 5px; 
  font-size: 0.8rem; 
  color: var(--accent-turquoise); 
  opacity: 0.5; 
  display: inline-block; 
  transition: opacity 0.2s ease; 
}

.live-indicator { 
  display: inline-block; 
  padding: 4px 8px; 
  font-size: 0.75rem; 
  color: #000; 
  background-color: #86efab; 
  border-radius: 4px; 
  margin-bottom: 1rem; 
  cursor: pointer; 
  animation: shakeConstant 0.3s ease infinite; 
}
@keyframes shakeConstant { 
  0% { transform: translateX(0); background-color: #86efab; } 
  33% { transform: translateX(-5px); background-color: #fca5a5; } 
  66% { transform: translateX(5px); background-color: #ffff00; } 
  100% { transform: translateX(0); background-color: #86efab; } 
}
.live-indicator.paused { 
  animation-play-state: paused; 
  background-color: var(--text-secondary); 
  color: var(--bg-secondary); 
}

.resizer { 
  width: 5px; 
  cursor: col-resize; 
  user-select: none; 
  position: absolute; 
  top: 0; 
  right: 0; 
  height: 100%; 
  background-color: transparent; 
  z-index: 10; 
}

.fade-out { animation: fadeOut 0.3s forwards; }
@keyframes fadeOut { to { opacity: 0; } }

.social-icons img { 
  width: 15px; 
  height: 15px; 
  margin-right: 4px; 
  vertical-align: middle; 
}

.radar-table tbody tr.paywall-target-row {
  position: relative; 
}

.pumpscope-button-overlay {
  position: absolute;
  top: 0;
  left: 0; 
  width: 100%; 
  height: 100%; 
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25; 
  pointer-events: none; 
}

.pumpscope-button-overlay .pumpscope-paywall-button {
    pointer-events: auto; 
}

@media screen and (max-width: 768px) {
  main { padding: 1rem 0.5rem; }
  .radar-table { 
    table-layout: auto; 
  }
  .radar-table th[data-sort] { 
      width: auto !important; 
  }
  
  .radar-table thead th, 
  .radar-table tbody td { 
    font-size: 0.85rem; 
    padding: 0.5rem 0.25rem; 
    min-width: 0 !important; 
    text-align: left !important; 
  }
  
  .radar-table thead th:nth-of-type(3), .radar-table tbody td:nth-of-type(3), 
  .radar-table thead th:nth-of-type(4), .radar-table tbody td:nth-of-type(4), 
  .radar-table thead th:nth-of-type(5), .radar-table tbody td:nth-of-type(5), 
  .radar-table thead th:nth-of-type(6), .radar-table tbody td:nth-of-type(6), 
  .radar-table thead th:nth-of-type(7), .radar-table tbody td:nth-of-type(7), 
  .radar-table thead th:nth-of-type(8), .radar-table tbody td:nth-of-type(8), 
  .radar-table thead th:nth-of-type(9), .radar-table tbody td:nth-of-type(9), 
  .radar-table thead th:nth-of-type(10), .radar-table tbody td:nth-of-type(10) 
  { 
    display: none !important; 
  }
  
  .radar-table thead th:nth-of-type(1), .radar-table tbody td:nth-of-type(1), 
  .radar-table thead th:nth-of-type(2), .radar-table tbody td:nth-of-type(2) 
  { 
    display: table-cell !important; 
  }
  
  .radar-table thead th:nth-of-type(1), 
  .radar-table tbody td:nth-of-type(1)
  { 
    white-space: nowrap; 
    text-align: center !important; 
  }
  .radar-table thead th:nth-of-type(2), 
  .radar-table tbody td:nth-of-type(2)
  { 
    white-space: normal; 
    overflow: visible; 
    text-overflow: clip; 
    padding-left: 0.25rem; 
    padding-right: 0.5rem; 
  }
}