* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    body {
      background: #0a0a0a;
      color: #e0e0e0;
      font-family: 'Courier New', monospace;
      padding: 24px
    }

    h1 {
      color: #00ff88;
      font-size: 1.3rem;
      margin-bottom: 4px
    }

    .sub {
      color: #ccc;
      font-size: .75rem;
      margin-bottom: 20px
    }

    .status {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #00ff88;
      margin-right: 6px;
      animation: pulse 2s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 16px
    }

    .card {
      background: #111;
      border: 1px solid #1e1e1e;
      border-radius: 8px;
      padding: 16px
    }

    .card-label {
      color: #bbb;
      font-size: .7rem;
      letter-spacing: 1px;
      margin-bottom: 6px
    }

    .card-value {
      font-size: 1.5rem;
      font-weight: bold;
      color: #00ff88
    }

    .card-value.amber {
      color: #ffaa00
    }

    .btc-bar {
      background: #111;
      border: 1px solid #1e1e1e;
      border-radius: 8px;
      padding: 14px 18px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 28px
    }

    .btc-sim-bar {
      background: #111;
      border: 1px solid #1e1e1e;
      border-radius: 8px;
      padding: 16px 18px;
      margin-bottom: 16px
    }

    .bsb-title {
      color: #bbb;
      font-size: .7rem;
      letter-spacing: 2px;
      margin-bottom: 12px
    }

    .bsb-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 12px
    }

    .bsb-stats {
      display: flex;
      gap: 24px;
      font-size: .8rem;
      color: #888
    }

    .bsb-stats b {
      color: #00ff88
    }

    .btc-label {
      color: #bbb;
      font-size: .7rem;
      letter-spacing: 1px;
      margin-bottom: 4px
    }

    .btc-price {
      font-size: 1.4rem;
      font-weight: bold;
      color: #00ff88
    }

    .btc-change {
      font-size: 1rem;
      font-weight: bold;
      color: #888
    }

    .btc-signal {
      font-size: .8rem;
      color: #555
    }

    .filters {
      background: #111;
      border: 1px solid #1e1e1e;
      border-radius: 8px;
      padding: 18px;
      margin-bottom: 16px
    }

    .filters h2 {
      color: #bbb;
      font-size: .7rem;
      letter-spacing: 2px;
      margin-bottom: 14px
    }

    .filter-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .fi label {
      color: #ccc;
      font-size: .7rem;
      display: block;
      margin-bottom: 6px
    }

    .fi input[type=range] {
      width: 100%;
      accent-color: #00ff88
    }

    .fi .val {
      color: #00ff88;
      font-size: .85rem;
      margin-top: 4px
    }

    .opps {
      background: #111;
      border: 1px solid #1e1e1e;
      border-radius: 8px;
      padding: 18px;
      margin-bottom: 16px
    }

    .opps h2 {
      color: #bbb;
      font-size: .7rem;
      letter-spacing: 2px;
      margin-bottom: 14px
    }

    .opp {
      border: 1px solid #1a1a1a;
      border-radius: 6px;
      padding: 14px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 16px
    }

    .opp:hover {
      border-color: #2a2a2a
    }

    .pct {
      font-size: 1.7rem;
      font-weight: bold;
      min-width: 78px;
      color: #00ff88
    }

    .pct.amber {
      color: #ffaa00
    }

    .pct.red {
      color: #ff4444
    }

    .info {
      flex: 1
    }

    .title {
      font-size: .85rem;
      color: #e0e0e0;
      margin-bottom: 4px
    }

    .meta {
      font-size: .72rem;
      color: #aaa
    }

    .meta span {
      margin-right: 10px
    }

    .liq {
      color: #00cc88 !important
    }

    .badge {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 2px 8px;
      font-size: .68rem;
      color: #bbb
    }

    .charts {
      background: #111;
      border: 1px solid #1e1e1e;
      border-radius: 8px;
      padding: 18px;
      margin-bottom: 16px;
      max-width: 100%;
    }

    .charts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      max-width: 100%;
    }

    .charts-poly {
      grid-template-columns: 1fr;
    }

    .chart-title {
      color: #bbb;
      font-size: .7rem;
      letter-spacing: 2px;
      margin-bottom: 10px
    }

    .btn {
      background: #00ff88;
      color: #000;
      border: none;
      padding: 10px 22px;
      border-radius: 6px;
      font-family: monospace;
      font-size: .85rem;
      cursor: pointer;
      font-weight: bold
    }

    .btn:hover {
      background: #00cc66
    }

    .btn:disabled {
      background: #222;
      color: #444;
      cursor: not-allowed
    }

    .empty {
      color: #888;
      text-align: center;
      padding: 32px;
      font-size: .85rem
    }

    .footer {
      color: #444;
      font-size: .7rem;
      margin-top: 14px
    }
  
    @media (max-width: 768px) {
  .charts-grid {
    grid-template-columns: 1fr !important;
  }
}