/* =====================================
   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;
}

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

  .mobile-section-card.table-card{
    padding:8px;
    border-radius:14px;
  }

  .mobile-data-table{
    min-width:680px;
  }

  .mobile-data-table th{
    font-size:12px;
    padding:10px 8px;
  }

  .mobile-data-table td{
    font-size:12px;
    padding:9px 8px;
  }
}

/* =====================================
   SMALLER PHONES
===================================== */
@media (max-width:480px){

  .mobile-data-table{
    min-width:620px;
  }

  .mobile-data-table th,
  .mobile-data-table td{
    font-size:11px;
    padding:8px 7px;
  }
}

/* =====================================
   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;
}

/* =========================
   SMALLER PHONE TWEAKS
========================= */
@media (max-width: 480px) {

  .mobile-data-table {
    font-size: 12px;
    min-width: 700px;
  }

  .mobile-data-table td,
  .mobile-data-table th {
    padding: 8px 6px;
  }
}

/* =========================
   MOBILE CAP POINT BOXES
========================= */

.mobile-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;

  width: 100%;
}

.stat-box {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;

  padding: 10px 12px;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;

  color: #ffffff;
  text-align: left;

  box-shadow: 0 4px 12px rgba(0,0,0,0.25);

  word-break: break-word;

  display: block;
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;

  overflow: visible;
  white-space: normal;
}

#smallcap-total-user,
#mediumcap-total-user,
#largecap-total-user {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  min-height: 42px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* positive / negative helpers */
.stat-box.positive {
  color: #4ade80;
}

.stat-box.negative {
  color: #f87171;
}

/* tablets / larger phones */
@media (min-width: 480px) {
  .mobile-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stat-box {
    text-align: center;
    font-size: 13px;
    padding: 12px 8px;
  }
}

/* =================================
   MOBILE CAP CHARTS
================================= */

.mobile-chart-wrap {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 18px;

  padding: 10px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;

  box-sizing: border-box;
  overflow: hidden;
}

/* all mobile charts */
.mobile-chart-wrap canvas {
  display: block;

  width: 100% !important;
  height: 180px !important;

  border-radius: 10px;
  background: rgba(0,0,0,0.18);
}

/* slightly larger on better phones */
@media (min-width: 480px) {
  .mobile-chart-wrap canvas {
    height: 210px !important;
  }
}

/* tablets */
@media (min-width: 768px) {
  .mobile-chart-wrap {
    padding: 14px;
  }

  .mobile-chart-wrap canvas {
    height: 240px !important;
  }
}

.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;
}

.mobile-status-board{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.status-card{
  background:#111827;
  border:1px solid #374151;
  padding:14px;
  border-radius:12px;
}

.status-title{
  font-size:15px;
  font-weight:700;
  margin-bottom:8px;
  color:#fff;
}

.status-message{
  font-size:14px;
  line-height:1.45;
  color:#d1d5db;
  margin-bottom:10px;
}

.status-meta{
  font-size:11px;
  color:#9ca3af;
  letter-spacing:.4px;
}

.status-card.good{
  border-left:4px solid #22c55e;
}

.status-card.warn{
  border-left:4px solid #eab308;
}

.status-card.info{
  border-left:4px solid #3b82f6;
}

.status-card.critical{
  border-left:4px solid #ef4444;
}

.status-empty{
  padding:20px;
  text-align:center;
  opacity:.65;
}

/* =========================
   CORE INDEX TABLE CARDS
========================= */

.core-asset-card{
  background:#111827;
  border:1px solid #374151;
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}

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

.core-rank{
  font-size:12px;
  color:#9ca3af;
  min-width:34px;
}

.core-symbol{
  flex:1;
  font-size:15px;
  font-weight:700;
  color:#ffffff;
}

.core-pct{
  font-size:13px;
  font-weight:700;
}

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

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

.core-pct.flat{
  color:#e5e7eb;
}

.core-row-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.core-row-grid div{
  background:#0f172a;
  border-radius:10px;
  padding:10px;
}

.core-row-grid span{
  display:block;
  font-size:11px;
  color:#9ca3af;
  margin-bottom:4px;
}

.core-row-grid strong{
  color:#ffffff;
  font-size:13px;
}


/* =========================
   MARKET ANALYSIS CARDS
========================= */

.core-analysis-card{
  background:#111827;
  border:1px solid #374151;
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}

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

.core-analysis-head strong{
  color:#ffffff;
  font-size:15px;
}

.core-analysis-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.core-analysis-grid div{
  background:#0f172a;
  border-radius:10px;
  padding:10px;
}

.core-analysis-grid span{
  display:block;
  font-size:11px;
  color:#9ca3af;
  margin-bottom:4px;
}

.core-analysis-grid strong{
  color:#ffffff;
  font-size:13px;
}

.mobile-empty{
  text-align:center;
  padding:18px;
  color:#9ca3af;
}

/* =========================
   CORE POINT STAT BOXES
========================= */

.mobile-stat-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}

.stat-box{
  background:#111827;
  border:1px solid #374151;
  border-radius:12px;
  padding:12px 8px;
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#ffffff;
  line-height:1.35;
  min-height:58px;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================
   POINT STATES
========================= */

.points-up{
  color:#22c55e !important;
  border-color:rgba(34,197,94,.45);
  background:rgba(34,197,94,.08);
}

.points-down{
  color:#ef4444 !important;
  border-color:rgba(239,68,68,.45);
  background:rgba(239,68,68,.08);
}

.points-neutral{
  color:#e5e7eb !important;
  border-color:#374151;
  background:#111827;
}

/* =========================
   MOBILE TIGHTENING
========================= */

@media (max-width: 480px){

  .mobile-stat-grid{
    gap:8px;
  }

  .stat-box{
    font-size:12px;
    padding:10px 6px;
    min-height:54px;
  }

}

/* =========================
   MOBILE CORE CHART WRAP
========================= */

.mobile-chart-wrap{
  background:#111827;
  border:1px solid #374151;
  border-radius:14px;
  padding:10px;
  margin:14px 0;
  min-height:240px;
  overflow:hidden;
}

/* Apex root */
.mobile-chart-wrap .apexcharts-canvas{
  margin:0 auto;
}

/* =========================
   TOOLTIP
========================= */

.apexcharts-tooltip{
  background:#0f172a !important;
  border:1px solid #374151 !important;
  color:#ffffff !important;
}

.apexcharts-tooltip-title{
  background:#111827 !important;
  border-bottom:1px solid #374151 !important;
  color:#e5e7eb !important;
}

/* =========================
   AXIS TEXT
========================= */

.apexcharts-xaxis-label,
.apexcharts-yaxis-label,
.apexcharts-legend-text{
  fill:#9ca3af !important;
  color:#9ca3af !important;
  font-size:11px !important;
}

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

.apexcharts-gridline{
  stroke:#1f2937 !important;
}

.apexcharts-xcrosshairs,
.apexcharts-ycrosshairs{
  stroke:#374151 !important;
}

/* =========================
   MOBILE TIGHTENING
========================= */

@media (max-width:480px){

  .mobile-chart-wrap{
    min-height:220px;
    padding:8px;
    border-radius:12px;
  }

  .apexcharts-xaxis-label,
  .apexcharts-yaxis-label{
    font-size:10px !important;
  }

}

.mobile-progress-shell{
  position:relative;
  overflow:hidden;
  background:#111827;
  border:1px solid #374151;
  border-radius:14px;
  padding:14px;
  margin:14px 0;
}

.mobile-progress-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:50%;
  border-radius:14px;
  transition:width .45s ease;
  opacity:.95;
}

.mobile-progress-content{
  position:relative;
  z-index:2;
}

.progress-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.progress-title span{
  color:#d1d5db;
  font-size:13px;
  font-weight:600;
}

.progress-title strong{
  color:#ffffff;
  font-size:18px;
  font-weight:800;
}

.progress-pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#0f172a;
  border:1px solid #374151;
}


.brand-logo{
  text-align:center;
  padding:20px 10px;
}

.brand-main{
  font-size:2.2rem;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;

  background:linear-gradient(
    90deg,
    #ffffff,
    #d1d5db,
    #ffffff
  );

  /* Standard + vendor */
  background-clip:text;
  -webkit-background-clip:text;

  color:transparent;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 0 10px rgba(255,255,255,.18),
    0 0 24px rgba(34,197,94,.14);
}

.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;
}

/* =====================================
   MOBILE INFINITE INDEX CSS
   Clean / fast / readable
===================================== */

#indexDisplayZone {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* -----------------------------
   CARD WRAPPER
------------------------------ */
.full-index-wrapper {
  width: 100%;
  margin: 0 0 14px 0;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  border: 1px solid #222;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
}

/* -----------------------------
   HEADER
------------------------------ */
.index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #161616;
  border-bottom: 1px solid #252525;
}

.index-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex: 1;
}

/* -----------------------------
   BUTTONS
------------------------------ */
.index-toggle-button,
.delete-index-button {
  border: 0;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}

.index-toggle-button {
  background: #1f1f1f;
  color: #ddd;
}

.delete-index-button {
  background: #331313;
  color: #ffb3b3;
}

/* -----------------------------
   SECTION
------------------------------ */
.index-section {
  padding: 10px;
  border-top: 1px solid #1f1f1f;
}

.index-section h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #f0f0f0;
}

/* -----------------------------
   PLACEHOLDERS / BOXES
------------------------------ */
.placeholder-box {
  margin-bottom: 10px;
  padding: 8px;
  background: #181818;
  border: 1px solid #252525;
  border-radius: 10px;
}

/* -----------------------------
   TABLE WRAP
------------------------------ */
.placeholder-box table,
.section-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

/* horizontal scroll safety */
.placeholder-box,
.section-content {
  overflow-x: auto;
}

/* -----------------------------
   TABLE STYLE
------------------------------ */
.crypto-table th,
.crypto-table td,
.nova-table th,
.nova-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid #252525;
  white-space: nowrap;
}

.crypto-table th,
.nova-table th {
  font-size: 11px;
  color: #9f9f9f;
  background: #141414;
  position: sticky;
  top: 0;
}

.crypto-table td,
.nova-table td {
  color: #f2f2f2;
}

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

/* -----------------------------
   POSITIVE / NEGATIVE
------------------------------ */
.up,
.green {
  color: #4fd37a;
}

.down,
.red {
  color: #ff6767;
}

/* -----------------------------
   MOBILE CHART BOX
------------------------------ */
.mobile-chart-wrap,
canvas {
  width: 100%;
  max-width: 100%;
}

canvas {
  display: block;
  height: auto !important;
}

/* -----------------------------
   FORM / EDITOR
------------------------------ */
.element-editor-inline {
  margin-top: 10px;
}

.editor-panel {
  display: grid;
  gap: 8px;
}

.editor-panel input {
  width: 100%;
  padding: 8px;
  background: #101010;
  border: 1px solid #2a2a2a;
  color: #fff;
  border-radius: 8px;
}

.editor-panel button {
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: #202020;
  color: #fff;
}

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

  .index-title {
    font-size: 15px;
  }

  .crypto-table th,
  .crypto-table td,
  .nova-table th,
  .nova-table td {
    padding: 7px 5px;
    font-size: 11px;
  }

  .full-index-wrapper {
    border-radius: 12px;
  }

  .index-header {
    padding: 9px 10px;
  }
}

/* -----------------------------
   EXTRA SMALL DEVICES
------------------------------ */
@media (max-width: 420px) {

  .index-title {
    font-size: 14px;
  }

  .crypto-table th,
  .crypto-table td,
  .nova-table th,
  .nova-table td {
    font-size: 10px;
    padding: 6px 4px;
  }

  .index-toggle-button,
  .delete-index-button {
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* ===============================
   MOBILE POINTS UI BAR
=============================== */

.points-ui-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

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

  color:#fff;
  font-weight:600;

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

/* left / center / right */
.points-ui-left,
.points-ui-center,
.points-ui-right{
  display:flex;
  flex-direction:column;
  gap:4px;
}

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

.points-ui-center{
  min-width:90px;
  text-align:center;
}

.points-ui-right{
  min-width:90px;
  text-align:right;
}

/* backgrounds */
.bg-positive{
  background:
  linear-gradient(
    135deg,
    #12351e,
    #1b5e31
  );
}

.bg-negative{
  background:
  linear-gradient(
    135deg,
    #3a1212,
    #5e1b1b
  );
}

/* text colors */
.text-positive{
  color:#61ff9b;
}

.text-negative{
  color:#ff8a8a;
}

/* labels */
.points-ui-left div:first-child{
  font-size:11px;
  opacity:.82;
  font-weight:500;
}

.points-ui-left div:last-child{
  font-size:18px;
  font-weight:800;
  letter-spacing:.3px;
}

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

  .points-ui-bar{
    padding:9px 10px;
    gap:8px;
  }

  .points-ui-left div:last-child{
    font-size:16px;
  }

  .points-ui-center,
  .points-ui-right{
    min-width:72px;
    font-size:12px;
  }
}

@media (max-width:420px){

  .points-ui-bar{
    padding:8px;
    gap:6px;
  }

  .points-ui-left div:last-child{
    font-size:14px;
  }

  .points-ui-center,
  .points-ui-right{
    min-width:64px;
    font-size:11px;
  }
}

/* =====================================
   MOBILE INDEX CHART BOX
===================================== */

.chart-box{
  width:100%;
  min-height:260px;
  height:260px;

  padding:10px;
  margin:12px 0;

  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;

  overflow:hidden;
  position:relative;
}

/* Apex root */
.chart-box .apexcharts-canvas,
.chart-box svg{
  width:100% !important;
  height:100% !important;
}

/* Cleaner tooltip */
.apexcharts-tooltip{
  border-radius:10px !important;
  font-size:12px !important;
}

/* Dark theme text */
.apexcharts-text,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label{
  fill:#cfcfcf !important;
}

/* grid subtle */
.apexcharts-gridline{
  stroke:rgba(255,255,255,0.06) !important;
}

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

  .chart-box{
    min-height:220px;
    height:220px;
    padding:8px;
    border-radius:12px;
  }

}