/* =====================================
   MOBILE POPULATED TABLE
   Crypto Wall Street Mobile Style
===================================== */

.mobile-section-card.table-card{
  width:100%;
  background:#111827;
  border:1px solid #1f2937;
  border-radius:16px;
  padding:10px;
  margin-bottom:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
}

/* Scroll Wrapper */
.mobile-table-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
}

/* Scrollbar */
.mobile-table-scroll::-webkit-scrollbar{
  height:6px;
}

.mobile-table-scroll::-webkit-scrollbar-thumb{
  background:#374151;
  border-radius:20px;
}

/* Table */
.mobile-data-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  color:#f9fafb;
  font-family:Arial, Helvetica, sans-serif;
  background:#111827;
}

/* Header */
.mobile-data-table thead tr{
  background:#1f2937;
}

.mobile-data-table th{
  padding:12px 10px;
  text-align:left;
  font-size:13px;
  font-weight:700;
  color:#d1d5db;
  letter-spacing:0.4px;
  white-space:nowrap;
  border-bottom:1px solid #374151;
  position:sticky;
  top:0;
  z-index:2;
}

/* Cells */
.mobile-data-table td{
  padding:11px 10px;
  font-size:13px;
  color:#f3f4f6;
  white-space:nowrap;
  border-bottom:1px solid rgba(55,65,81,0.55);
}

/* Row Hover */
.mobile-data-table tbody tr:hover{
  background:#182234;
}

/* Zebra */
.mobile-data-table tbody tr:nth-child(even){
  background:rgba(255,255,255,0.015);
}

/* Price column */
.mobile-data-table td:nth-child(3){
  font-weight:700;
  color:#ffffff;
}

/* Cap column */
.mobile-data-table td:nth-child(4){
  color:#93c5fd;
}

/* Symbol */
.mobile-data-table td:nth-child(2){
  font-weight:700;
  color:#10b981;
}

/* Name */
.mobile-data-table td:nth-child(1){
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =====================================
   TAB SYSTEM
===================================== */

/* hidden tabs */
.hidden{
  display:none !important;
}

/* visible tab sections */
.tab{
  width:100%;
  padding:12px;
  box-sizing:border-box;
}

/* =====================================
   MOBILE NAV BAR
===================================== */

.mobile-nav-bar{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:10px;
  position:sticky;
  top:0;
  z-index:100;
  background:#111827;
  border-bottom:1px solid #1f2937;
  -webkit-overflow-scrolling:touch;
}

.mobile-nav-bar::-webkit-scrollbar{
  display:none;
}

/* nav buttons */
.nav-btn{
  flex:0 0 auto;
  border:none;
  outline:none;
  cursor:pointer;

  background:#1f2937;
  color:#f9fafb;

  padding:10px 14px;
  border-radius:12px;

  font-size:13px;
  font-weight:700;
  white-space:nowrap;

  transition:0.2s ease;
}

/* active tab button */
.nav-btn.active{
  background:#2563eb;
  color:#ffffff;
}

/* tap feedback */
.nav-btn:active{
  transform:scale(0.97);
}

/* phones */
@media (max-width:768px){

  .tab{
    padding:10px;
  }

  .nav-btn{
    font-size:12px;
    padding:9px 12px;
  }
}

/* =========================
   MOBILE TABLE WRAPPER
========================= */
.mobile-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

/* =========================
   TABLE BASE
========================= */
.mobile-data-table {
  width: 100%;
  min-width: 760px; /* allows horizontal scroll */
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

/* =========================
   HEADERS
========================= */
.mobile-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;

  background: #132033;
  color: #fff;
  padding: 10px 8px;
  text-align: left;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* =========================
   BODY CELLS
========================= */
.mobile-data-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #f5f7fa;
  font-size: 13px;
}

/* zebra rows */
.mobile-data-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,.02);
}

/* hover optional */
.mobile-data-table tbody tr:hover {
  background: rgba(255,255,255,.04);
}

/* =========================
   CARD WRAPPER
========================= */
.tier-card {
  border-radius: 18px;
}

.mobile-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

/* ============================= */
/* GLOBAL DARK TERMINAL BASE */
/* ============================= */
body {
  background: #0b0f14;
  color: #e6edf3;
  font-family: "Segoe UI", Roboto, sans-serif;
}

/* ============================= */
/* SECTION WRAPPER */
/* ============================= */
.table-section {
  margin-top: 20px;
  background: #121821;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #1f2937;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02);
}

/* ============================= */
/* HEADINGS */
/* ============================= */
.table-section h2 {
  color: #facc15; /* Bloomberg gold */
  font-size: 16px;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* ============================= */
/* TABLE */
/* ============================= */
.table-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* HEADER */
.table-section thead {
  background: #1f2937;
}

.table-section th {
  padding: 8px;
  text-align: center;
  color: #9ca3af;
  font-weight: 600;
  border-bottom: 1px solid #374151;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* BODY */
.table-section td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #1f2937;
}

/* ROW COLORS */
.table-section tbody tr:nth-child(even) {
  background: #0f172a;
}

.table-section tbody tr:nth-child(odd) {
  background: #020617;
}

/* HOVER */
.table-section tbody tr:hover {
  background: #1e293b;
}

/* ============================= */
/* IMAGE */
/* ============================= */
.table-section img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: contain;
  background: #111;
  padding: 2px;
}

/* ============================= */
/* NUMBERS (make them pop) */
/* ============================= */
.table-section td:nth-child(5), /* Price */
.table-section td:nth-child(6), /* Market Cap */
.table-section td:nth-child(8) { /* Points */
  font-weight: 600;
  color: #38bdf8; /* blue accent */
}

/* ============================= */
/* PERCENT COLOR */
/* ============================= */
.table-section td:last-child {
  color: #22c55e; /* green */
  font-weight: 600;
}

/* ============================= */
/* PAGINATION */
/* ============================= */
.pagination-controls button {
  margin: 3px;
  padding: 5px 9px;
  border: 1px solid #374151;
  background: #111827;
  color: #9ca3af;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.pagination-controls button:hover {
  background: #1f2937;
  color: #fff;
}

.pagination-controls .active-page {
  background: #facc15;
  color: #000;
  border-color: #facc15;
}

/* ============================= */
/* POINT BOX (TERMINAL STYLE) */
/* ============================= */
#smallcap-points-ui-user,
#midcap-points-ui-user,
#largecap-points-ui-user {
  background: #020617;
  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

#smallcap-points-ui-user h3,
#midcap-points-ui-user h3,
#largecap-points-ui-user h3 {
  color: #facc15;
  font-size: 14px;
  margin-bottom: 6px;
}

#smallcap-points-ui-user p,
#midcap-points-ui-user p,
#largecap-points-ui-user p {
  margin: 4px 0;
  font-size: 13px;
}

/* ============================= */
/* CHART BORDER */
/* ============================= */
canvas {
  margin-top: 8px;
  border: 1px solid #1f2937;
  border-radius: 6px;
  background: #020617;
}

.table-section h2 {
  text-shadow: 0 0 6px rgba(250,204,21,0.4);
}

/* ============================= */
/* CHART WRAPPER */
/* ============================= */
.mobile-chart-wrap,
.chart-wrap,
#smallcap-points-ui-user canvas,
#midcap-points-ui-user canvas,
#largecap-points-ui-user canvas {
  display: block;
  width: 100%;
  margin-top: 8px;
}

/* ============================= */
/* CANVAS BASE */
/* ============================= */
canvas {
  width: 100%;
  height: auto;
  background: #020617;
  border: 1px solid #1f2937;
  border-radius: 6px;

  /* subtle glow */
  box-shadow:
    inset 0 0 10px rgba(255,255,255,0.03),
    0 0 8px rgba(0,0,0,0.4);
}

/* ============================= */
/* CHART PANEL (BETTER CONTAINER) */
/* ============================= */
#smallcap-points-ui-user,
#midcap-points-ui-user,
#largecap-points-ui-user {
  background: linear-gradient(
    135deg,
    #020617,
    #020617 60%,
    #0f172a
  );

  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;

  /* panel depth */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    0 6px 18px rgba(0,0,0,0.6);
}

/* ============================= */
/* TITLES */
/* ============================= */
#smallcap-points-ui-user h3,
#midcap-points-ui-user h3,
#largecap-points-ui-user h3 {
  font-size: 13px;
  font-weight: 700;
  color: #facc15; /* gold */
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* ============================= */
/* VALUE TEXT */
/* ============================= */
#smallcap-points-ui-user p,
#midcap-points-ui-user p,
#largecap-points-ui-user p {
  font-size: 12px;
  color: #9ca3af;
  margin: 2px 0;
}

/* ============================= */
/* POSITIVE / NEGATIVE COLORS */
/* ============================= */
.positive {
  color: #22c55e;
  text-shadow: 0 0 4px rgba(34,197,94,0.4);
}

.negative {
  color: #ef4444;
  text-shadow: 0 0 4px rgba(239,68,68,0.4);
}

/* ============================= */
/* CHART GLOW PER TIER */
/* ============================= */

/* SMALL (green glow) */
#simple-smallcap-chart-user {
  box-shadow:
    inset 0 0 10px rgba(34,197,94,0.05),
    0 0 10px rgba(34,197,94,0.2);
}

/* MEDIUM (blue glow) */
#simple-mediumcap-chart-user {
  box-shadow:
    inset 0 0 10px rgba(59,130,246,0.05),
    0 0 10px rgba(59,130,246,0.2);
}

/* LARGE (gold glow 🔥) */
#simple-largecap-chart-user {
  box-shadow:
    inset 0 0 10px rgba(250,204,21,0.05),
    0 0 10px rgba(250,204,21,0.25);
}

/* =========================
   CORE GLOBAL STYLE
========================= */

:root {
  --bg-main: #0b0f14;
  --card-bg: #121821;
  --card-border: #1f2937;

  --text-main: #e5e7eb;
  --text-dim: #9ca3af;

  --green: #22c55e;
  --red: #ef4444;
  --gray: #9ca3af;
}

body {
  background: var(--bg-main);
  color: var(--text-main);
  font-family: system-ui, -apple-system, sans-serif;
}

.core-asset-card.user {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  transition: 0.2s;
}

.core-asset-card.user:hover {
  border-color: #374151;
}

/* top row */
.core-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.core-symbol-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.core-icon {
  width: 18px;
  height: 18px;
}

.core-name {
  font-size: 12px;
  color: var(--text-dim);
}

/* grid */
.core-row-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: 12px;
  gap: 6px;
}

.core-row-grid span {
  display: block;
  color: var(--text-dim);
}

.core-pct.up {
  color: var(--green);
}

.core-pct.down {
  color: var(--red);
}

.core-pct.flat {
  color: var(--gray);
}

.perf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid #1f2937;
}

.perf-row:last-child {
  border-bottom: none;
}

.perf-row.up {
  color: var(--green);
}

.perf-row.down {
  color: var(--red);
}

.perf-asset {
  display: flex;
  align-items: center;
  gap: 6px;
}

.perf-icon {
  width: 16px;
  height: 16px;
}

.core-movers-grid {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.core-mover-card {
  flex: 1;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 10px;
  border: 1px solid var(--card-border);
}

.core-mover-card.gainer {
  border-left: 3px solid var(--green);
}

.core-mover-card.loser {
  border-left: 3px solid var(--red);
}

.core-mover-main {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}

.core-mover-icon {
  width: 20px;
  height: 20px;
}

.core-mover-symbol {
  font-weight: bold;
}

.core-mover-name {
  font-size: 12px;
  color: var(--text-dim);
}

.core-mover-pct {
  font-size: 14px;
  font-weight: bold;
}

.core-analysis-card.user {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--card-border);
}

/* trend edge */
.core-analysis-card.user.up {
  border-left: 3px solid var(--green);
}

.core-analysis-card.user.down {
  border-left: 3px solid var(--red);
}

/* header */
.core-analysis-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.core-analysis-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.core-analysis-icon {
  width: 18px;
  height: 18px;
}

.core-analysis-name {
  font-size: 12px;
  color: var(--text-dim);
}

/* grid */
.core-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  font-size: 12px;
}

.core-analysis-grid span {
  display: block;
  color: var(--text-dim);
}

.core-analysis-card.user.up {
  box-shadow: 0 0 8px rgba(34,197,94,0.2);
}

.core-analysis-card.user.down {
  box-shadow: 0 0 8px rgba(239,68,68,0.2);
}

/* =========================
   POINTS UI (TOP STATS)
========================= */

.corePointsUI {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #121821;
  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 10px 14px;
}

.corePointsBlock {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.corePointsBlock span {
  color: #9ca3af;
}

.corePointsBlock strong {
  font-size: 14px;
  color: #e5e7eb;
}

.coreDivider {
  width: 1px;
  height: 24px;
  background: #1f2937;
}

.points-up {
  color: #22c55e !important;
}

.points-down {
  color: #ef4444 !important;
}

.points-neutral {
  color: #9ca3af !important;
}

.stat-box {
  font-weight: 600;
}

/* =========================
   POINTS BAR (FIXED)
========================= */

.corePointsBar {
  position: relative;
  height: 42px; /* 🔥 THIS WAS MISSING */
  margin-top: 10px;
  background: #0b0f14;
  border: 1px solid #1f2937;
  border-radius: 10px;
  overflow: hidden;
}

/* fill layer */
.coreBarFill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background: rgba(255,255,255,0.08);
  transition: width 0.4s ease;
  z-index: 1;
}

/* content layer */
.coreBarContent {
  position: relative;
  z-index: 2;
  height: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 12px;
}

/* left text */
.coreBarInfo span {
  font-size: 11px;
  color: #9ca3af;
}

.coreBarInfo strong {
  display: block;
  font-size: 14px;
  color: #e5e7eb;
}

/* pill */
.coreBarPill {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.05);
}

/* =========================
   CHART SHELL
========================= */

.coreChartShell {
  margin-top: 14px;
  background: #121821;
  border: 1px solid #1f2937;
  border-radius: 12px;
  padding: 10px;
}

.coreChartTitleRow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.coreChartTitle {
  font-size: 13px;
  color: #e5e7eb;
}

.coreChartMeta {
  font-size: 11px;
  color: #9ca3af;
}

.coreChartMount {
  width: 100%;
}

/* =========================
   CORE CARD SYSTEM
========================= */

.coreCard {
  background: #121821;
  border: 1px solid #1f2937;
  border-radius: 12px;
  margin-top: 12px;
  overflow: hidden;
}

.coreCardWide {
  grid-column: span 2;
}

.coreCardHeader {
  padding: 8px 12px;
  border-bottom: 1px solid #1f2937;
  display: flex;
  justify-content: space-between;
}

.coreCardTitle {
  font-size: 13px;
  color: #e5e7eb;
}

.coreCardMeta {
  font-size: 11px;
  color: #9ca3af;
}

.coreCardBody {
  padding: 10px;
}

.coreIndexFrame {
  margin-bottom: 20px;
}

.coreIndexHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coreIndexTitle {
  font-size: 18px;
  font-weight: bold;
}

.coreIndexSub {
  font-size: 12px;
  color: #9ca3af;
}

/* =========================
   GLOW EFFECT (OPTIONAL)
========================= */

.points-up {
  text-shadow: 0 0 6px rgba(34,197,94,0.4);
}

.points-down {
  text-shadow: 0 0 6px rgba(239,68,68,0.4);
}

/* =========================
   🔥 CORE STATS ROW
========================= */
.coreStatsRow {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.coreStatBox {
  flex: 1;
  background: linear-gradient(
    135deg,
    #0f172a,
    #111827
  );
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 6px 18px rgba(0,0,0,0.35);
}

.coreStatBox span {
  font-size: 11px;
  color: #9ca3af;
}

.coreStatBox strong {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
  color: #e5e7eb;
}


/* =========================
   🔥 POINTS BAR
========================= */
.corePointsBar {
  position: relative;
  height: 48px;
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;

  background: linear-gradient(
    135deg,
    #0b1220,
    #0f1a2e
  );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 10px 30px rgba(0,0,0,0.4);
}


/* =========================
   🔥 BAR FILL
========================= */
.coreBarFill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;

  background: linear-gradient(
    90deg,
    rgba(34,197,94,0.45),
    rgba(34,197,94,0.15)
  );

  transition: width 0.4s ease;
}


/* =========================
   🔥 BAR CONTENT
========================= */
.coreBarContent {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 100%;
  padding: 0 14px;
}


/* =========================
   🔥 LEFT SIDE TEXT
========================= */
.coreBarInfo {
  display: flex;
  flex-direction: column;
}

.coreBarInfo span {
  font-size: 11px;
  color: #9ca3af;
}

.coreBarInfo strong {
  font-size: 14px;
  color: #e5e7eb;
  font-weight: 600;
}


/* =========================
   🔥 PILL
========================= */
.coreBarPill {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;

  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);

  color: #cbd5f5;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 4px 10px rgba(0,0,0,0.35);
}


/* =========================
   🔥 POSITIVE / NEGATIVE STATES
========================= */
.coreBarFill.up {
  background: linear-gradient(
    90deg,
    rgba(34,197,94,0.5),
    rgba(34,197,94,0.2)
  );
}

.coreBarFill.down {
  background: linear-gradient(
    90deg,
    rgba(239,68,68,0.5),
    rgba(239,68,68,0.2)
  );
}

.coreBarPill.up {
  color: #22c55e;
}

.coreBarPill.down {
  color: #ef4444;
}

.forex-tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}

.forex-tab{
  flex:1;
  border:none;
  padding:10px;
  border-radius:10px;
  background:#181818;
  color:#fff;
  font-size:13px;
}

.forex-tab.active{
  background:#2a7cff;
}

.forex-mobile-card{
  background:#111;
  border:1px solid #222;
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}

.forex-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
}

.forex-symbol{
  font-size:18px;
  font-weight:700;
}

.forex-native{
  opacity:.7;
  font-size:12px;
}

.forex-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.forex-grid div{
  background:#181818;
  padding:7px;
  border-radius:8px;
  font-size:13px;
}

.empty-box{
  text-align:center;
  padding:20px;
  opacity:.6;
}

.mobile-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px;
}

.mobile-nav .nav-btn{
  width:100%;
  border:none;
  padding:12px 8px;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  background:#181818;
  color:#fff;
}

.mobile-nav .nav-btn:active{
  transform:scale(.98);
}

.forex-mobile-card{
  color:#ffffff;
}

.forex-mobile-card *{
  color:#ffffff;
}

.forex-grid div{
  color:#ffffff;
}

.forex-native{
  color:#9ca3af;
}

/* =========================
   TABLE BASE (ALL TABLES)
========================= */
.crypto-table,
.nova-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 16px;
}

/* =========================
   HEADERS
========================= */
.crypto-table thead,
.nova-table thead {
  background: #111827; /* dark header */
}

.crypto-table th,
.nova-table th {
  padding: 10px 8px;
  text-align: left;
  font-weight: 600;
  color: #e5e7eb;
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* =========================
   ROWS
========================= */
.crypto-table td,
.nova-table td {
  padding: 8px;
  border-bottom: 1px solid #1f2937;
  color: #d1d5db;
  vertical-align: middle;
}

/* =========================
   ROW STRIPING
========================= */
.crypto-table tbody tr:nth-child(even),
.nova-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

/* =========================
   HOVER EFFECT
========================= */
.crypto-table tbody tr:hover,
.nova-table tbody tr:hover {
  background: rgba(255,255,255,0.06);
  transition: 0.2s;
}

/* =========================
   IMAGE + NAME CELL
========================= */
.crypto-table td img,
.nova-table td img {
  vertical-align: middle;
  margin-right: 6px;
}

/* =========================
   PRICE + NUMBER ALIGNMENT
========================= */
.crypto-table td:nth-child(3),
.crypto-table td:nth-child(4),
.crypto-table td:nth-child(5),
.crypto-table td:nth-child(6),
.crypto-table td:nth-child(7) {
  text-align: right;
}

.nova-table td:nth-child(3),
.nova-table td:nth-child(4),
.nova-table td:nth-child(5),
.nova-table td:nth-child(6),
.nova-table td:nth-child(7),
.nova-table td:nth-child(8),
.nova-table td:nth-child(9),
.nova-table td:nth-child(10) {
  text-align: right;
}

/* =========================
   POSITIVE / NEGATIVE COLORS
========================= */
.text-positive {
  color: #22c55e;
}

.text-negative {
  color: #ef4444;
}

/* =========================
   PLACEHOLDER EMPTY STATE
========================= */
.placeholder-empty {
  padding: 20px;
  text-align: center;
  color: #9ca3af;
  font-style: italic;
}

/* =========================
   PERFORMANCE TABLE
========================= */
.performance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 16px;
}

.performance-table thead {
  background: #0f172a;
}

.performance-table th {
  padding: 10px 8px;
  text-align: left;
  font-weight: 600;
  color: #e5e7eb;
  font-size: 13px;
}

.performance-table td {
  padding: 8px;
  border-bottom: 1px solid #1f2937;
  vertical-align: middle;
}

/* subtle row striping */
.performance-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

/* hover */
.performance-table tbody tr:hover {
  background: rgba(255,255,255,0.06);
  transition: 0.2s;
}

/* numeric alignment */
.performance-table td:nth-child(4),
.performance-table td:nth-child(5),
.performance-table td:nth-child(6) {
  text-align: right;
}

/* logo spacing */
.performance-table img {
  vertical-align: middle;
}

/* =========================
   HISTORY TABLE
========================= */
.history-performance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 16px;
}

.history-performance-table thead {
  background: #111827;
}

.history-performance-table th {
  padding: 8px;
  text-align: left;
  font-weight: 600;
  color: #d1d5db;
  font-size: 12px;
}

.history-performance-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #1f2937;
  color: #9ca3af;
}

/* striping */
.history-performance-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

/* hover */
.history-performance-table tbody tr:hover {
  background: rgba(255,255,255,0.05);
}

/* align points column */
.history-performance-table td:nth-child(3) {
  text-align: right;
  font-weight: 600;
  color: #e5e7eb;
}

/* current row highlight (optional but nice) */
.history-performance-table tbody tr:first-child {
  background: rgba(34,197,94,0.08);
  color: #22c55e;
  font-weight: 700;
}

/* =========================
   POINTS UI BAR BASE
========================= */
.points-ui-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px 14px;
  margin-bottom: 12px;

  border-radius: 8px;
  border: 1px solid #1f2937;

  background: #0f172a;
  font-size: 14px;
}

/* =========================
   LEFT / CENTER / RIGHT
========================= */
.points-ui-left,
.points-ui-center,
.points-ui-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.points-ui-left {
  text-align: left;
}

.points-ui-center {
  text-align: center;
}

.points-ui-right {
  text-align: right;
}

/* =========================
   TOTAL POINTS
========================= */
.points-ui-left div:first-child {
  font-size: 12px;
  color: #9ca3af;
}

.points-ui-left div:last-child {
  font-size: 18px;
  font-weight: 700;
  color: #e5e7eb;
}

/* =========================
   LIVE + DAY VALUES
========================= */
.points-ui-center div,
.points-ui-right div {
  font-weight: 600;
}

/* secondary (24h row) */
.points-ui-center div:last-child,
.points-ui-right div:last-child {
  font-size: 12px;
  opacity: 0.85;
}

/* =========================
   COLORS
========================= */
.text-positive {
  color: #22c55e;
}

.text-negative {
  color: #ef4444;
}

/* =========================
   BACKGROUND STATES
========================= */
.bg-positive {
  background: rgba(34,197,94,0.06);
  border-color: rgba(34,197,94,0.2);
}

.bg-negative {
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.2);
}

/* =========================
   HOVER EFFECT
========================= */
.points-ui-bar:hover {
  background: rgba(255,255,255,0.04);
  transition: 0.2s;
}

.brand-sub{
  margin-top:6px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#22c55e;

  text-shadow:
    0 0 8px rgba(34,197,94,.35);
}

.brand-link-box{
  text-align:center;
  margin:18px 0;
}

.brand-link-box a{
  display:inline-block;
  padding:12px 22px;
  border-radius:14px;

  background:linear-gradient(
    135deg,
    #111827,
    #1f2937
  );

  color:#ffffff;
  font-weight:800;
  text-decoration:none;
  letter-spacing:.5px;

  border:1px solid #374151;

  box-shadow:
    0 6px 18px rgba(0,0,0,.25);

  transition:.2s ease;
}

.brand-link-box a:hover{
  transform:translateY(-2px);
  border-color:#22c55e;
}

.core-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.core-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.core-asset {
  display: flex;
  align-items: center;
  gap: 8px;
}

.core-icon {
  width: 20px;
  height: 20px;
}

.core-asset-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.core-symbol {
  font-weight: 600;
  font-size: 14px;
  color: #e5e7eb;
}

.core-name {
  font-size: 12px;
  color: #9ca3af;
}

.core-pct.up {
  color: #22c55e;
}

.core-pct.down {
  color: #ef4444;
}

/* =====================================
   FORCE TABLE HEADER VISIBILITY
===================================== */

.crypto-table thead th,
.nova-table thead th,
.mobile-data-table thead th,
.performance-table thead th,
.history-performance-table thead th {

  background: #111827 !important;
  color: #f9fafb !important;

  font-weight: 700;
  border-bottom: 1px solid #374151;
}

.dacs-search-wrapper {

  width: 100%;
  max-width: 700px;

  margin: 20px auto;
}

#dacsSearchInput {

  width: 100%;

  padding: 12px;

  border: 1px solid #333;

  background: #111;

  color: white;

  font-size: 16px;

  border-radius: 6px;

  margin-bottom: 12px;
}

#dacsSearchResults {

  display: flex;

  flex-direction: column;

  gap: 10px;
}

.dacs-search-card {

  background:
    linear-gradient(
      145deg,
      #071224,
      #09152b
    );

  border:
    1px solid rgba(80,140,255,0.15);

  border-radius: 18px;

  padding: 24px;

  color: white;

  box-shadow:
    0 0 25px rgba(0,0,0,0.35);

  overflow: hidden;

  transition: 0.2s ease;
}

.dacs-search-card:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(100,160,255,0.28);
}

/* ============================== */
/* HEADER */
/* ============================== */

.dacs-search-header {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 22px;
}

.dacs-search-logo {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  object-fit: cover;

  background: #111;
}

.dacs-search-header-info {

  display: flex;

  flex-direction: column;

  gap: 6px;
}

.dacs-search-name {

  font-size: 32px;

  font-weight: 800;

  color: white;
}

.dacs-search-sub {

  font-size: 18px;

  font-weight: 700;

  color: #60a5fa;
}

/* ============================== */
/* DESCRIPTION */
/* ============================== */

.dacs-search-description {

  font-size: 18px;

  line-height: 1.7;

  color: #d2d8e3;

  margin-bottom: 24px;
}

/* ============================== */
/* GRID */
/* ============================== */

.dacs-search-grid {

  display: flex;

  flex-direction: column;

  border-top:
    1px solid rgba(255,255,255,0.06);
}

.dacs-search-row {

  display: grid;

  grid-template-columns:
    240px 1fr;

  gap: 20px;

  padding: 16px 0;

  border-bottom:
    1px solid rgba(255,255,255,0.06);
}

.dacs-search-label {

  color: #94a3b8;

  font-weight: 700;

  font-size: 15px;
}

.dacs-search-value {

  color: #60a5fa;

  font-weight: 700;

  font-size: 17px;

  word-break: break-word;
}

.dacs-guide-box {

  background: #0f172a;

  border: 1px solid #1e293b;

  border-radius: 14px;

  padding: 20px;

  margin-bottom: 24px;

  color: #e5e7eb;
}

.dacs-guide-box h2 {

  margin: 0 0 8px;

  font-size: 24px;
}

.dacs-guide-subtitle {

  color: #94a3b8;

  margin-bottom: 18px;

  line-height: 1.6;
}

.dacs-guide-format {

  background: #020617;

  border: 1px solid #1e293b;

  border-radius: 12px;

  padding: 16px;

  margin-bottom: 22px;
}

.dacs-guide-format-title {

  font-size: 18px;

  font-weight: 700;

  margin-bottom: 10px;

  color: #38bdf8;
}

.dacs-guide-format-code {

  font-size: 28px;

  font-weight: 900;

  color: white;

  margin-bottom: 16px;
}

.dacs-guide-format-breakdown {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 14px;

  color: #cbd5e1;
}

.dacs-guide-note {

  font-size: 14px;

  line-height: 1.6;

  color: #94a3b8;
}

.dacs-guide-table {

  display: grid;

  gap: 10px;
}

.dacs-guide-row {

  display: grid;

  grid-template-columns: 130px 240px 1fr;

  gap: 14px;

  padding: 14px;

  border-radius: 10px;

  background: #111827;

  border: 1px solid #1f2937;
}

.dacs-guide-row.header {

  background: #020617;

  font-weight: 800;

  color: #38bdf8;
}

.dacs-guide-row div:first-child {

  font-weight: 800;

  color: #38bdf8;
}

@media (max-width: 900px) {

  .dacs-guide-row {

    grid-template-columns: 1fr;
  }
}

/* ====================================
   Infinite DACS Reference
==================================== */

.infinite-dacs-wrapper {

  width: 100%;

  overflow-x: auto;

  margin-top: 20px;

  padding: 12px;

  border-radius: 14px;

  background:
    rgba(20, 20, 30, 0.92);

  border:
    1px solid rgba(255,255,255,0.06);
}

/* ====================================
   Title
==================================== */

.infinite-dacs-title {

  margin-bottom: 14px;

  font-size: 1.1rem;

  font-weight: 700;

  color: #ffffff;
}

/* ====================================
   Table
==================================== */

.infinite-dacs-table {

  width: 100%;

  border-collapse: collapse;

  min-width: 700px;
}

/* ====================================
   Headers
==================================== */

.infinite-dacs-table th {

  padding: 12px;

  text-align: left;

  font-size: 0.92rem;

  font-weight: 700;

  color: #b8c4ff;

  border-bottom:
    1px solid rgba(255,255,255,0.08);
}

/* ====================================
   Rows
==================================== */

.infinite-dacs-table td {

  padding: 12px;

  font-size: 0.9rem;

  color: #e8e8e8;

  border-bottom:
    1px solid rgba(255,255,255,0.05);

  vertical-align: middle;
}

/* ====================================
   Hover
==================================== */

.infinite-dacs-table tbody tr:hover {

  background:
    rgba(255,255,255,0.03);
}

/* ====================================
   Images
==================================== */

.dacs-ref-image {

  width: 28px;

  height: 28px;

  object-fit: contain;

  border-radius: 50%;

  background:
    rgba(255,255,255,0.04);

  padding: 2px;
}

/* ====================================
   DACS Number
==================================== */

.dacs-number {

  font-family:
    monospace;

  font-weight: 700;

  color: #8fb8ff;

  letter-spacing: 0.5px;
}

/* ====================================
   Empty State
==================================== */

.dacs-empty {

  padding: 20px;

  text-align: center;

  color: #999;

  font-size: 0.95rem;
}

/* ==================================== */
/* DACS GUIDE SECTION SPACING */
/* ==================================== */

.dacs-guide-format {

  margin-top: 25px;

  padding: 20px;

  border-radius: 12px;

  background:
    rgba(255,255,255,0.03);

  border:
    1px solid rgba(255,255,255,0.08);
}

/* ==================================== */
/* SECTION TITLES */
/* ==================================== */

.dacs-guide-format-title {

  font-size: 18px;

  font-weight: 700;

  margin-bottom: 12px;

  color: #ffffff;
}

/* ==================================== */
/* CODE BLOCKS */
/* ==================================== */

.dacs-guide-format-code {

  font-family: monospace;

  font-size: 15px;

  padding: 12px;

  margin-top: 10px;

  margin-bottom: 15px;

  border-radius: 8px;

  background:
    rgba(0,0,0,0.35);

  color: #7CFFB2;

  line-height: 1.7;

  overflow-x: auto;
}

/* ==================================== */
/* BREAKDOWN SECTION */
/* ==================================== */

.dacs-guide-format-breakdown {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-top: 10px;

  margin-bottom: 15px;
}

/* ==================================== */
/* NOTES */
/* ==================================== */

.dacs-guide-note {

  margin-top: 15px;

  padding: 14px;

  border-left:
    4px solid #7CFFB2;

  background:
    rgba(255,255,255,0.03);

  border-radius: 6px;

  line-height: 1.6;

  color:
    rgba(255,255,255,0.82);
}

.dacs-search-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 10px;
}

.dacs-search-tag {

  padding: 6px 12px;

  border-radius: 999px;

  background:
    rgba(96,165,250,0.12);

  border:
    1px solid rgba(96,165,250,0.25);

  color: #93c5fd;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.3px;
}