/* === Box background override === */
.box, [class*="box"], .card, [class*="Card"], .panel, [class*="panel"], .widget, [class*="widget"], 
.tile, [class*="tile"], .module, [class*="module"], .container-box, [class*="Container"], 
.convert-box, [class*="convert"] {
  background-color: #1f2937 !important; /* dark grey */
}

/* === Mobile optimization === */
@media (max-width: 640px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    margin: 0;
    padding: 8px;
  }
  .row, .rows, .columns, .cols, .grid, [class*="grid"], [class*="row"], [class*="columns"] {
    display: block !important;
  }
  .grid, [class*="grid"] {
    grid-template-columns: 1fr !important;
  }
  .box, [class*="box"], .card, [class*="Card"], .panel, [class*="panel"], .widget, [class*="widget"], .tile, [class*="tile"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  img, canvas, svg, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  select, input, button {
    font-size: 16px;
  }
  table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  pre, code {
    white-space: pre-wrap;
    word-break: break-word;
  }
  .chart, .chart-container, [class*="chart"] {
    min-width: 0 !important;
  }
}