/* === stelaraX Chart Demo (scoped) – black/white/gray with 2x2 controls grid === */
.sx-demo{display:grid;gap:16px;color:#fff}
.sx-card{background:#1C2A38;border:1px solid #222;box-shadow:0 6px 18px rgba(0,0,0,.45);padding:16px}
.sx-card h3{margin:0 0 8px;color:#fff}
.sx-head{display:flex;justify-content:flex-start;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.sx-badge{display:inline-block;font-size:12px;border:1px solid #333;color:#9b9b9b;padding:4px 8px;background:transparent}

/* === Controls: 2x2 Grid ========================================= */
.sx-controls{
  display:grid;
  gap:12px;
  margin-top:10px;
  margin-bottom:20px;
  align-items:center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "symbol tf"
    "strategy button";
}
.sx-symbol{ grid-area: symbol; }
.sx-tf{ grid-area: tf; }
.sx-strategy{ grid-area: strategy; }
.sx-scan{ grid-area: button; width:100%; }

/* Mobile: 1x4 Stack */
@media(max-width:540px){
  .sx-controls{
    grid-template-columns: 1fr;
    grid-template-areas:
      "symbol"
      "tf"
      "strategy"
      "button";
  }
  .sx-btn{ width:100%; }
}

/* Inputs */
.sx-select,.sx-btn{border-radius:0;-webkit-appearance:none;appearance:none}
.sx-select{
  background:#1C2A38;color:#fff;border:1px solid #222;
  padding:0 34px 0 10px;
  height:40px; line-height:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff'><path d='M2 4l4 4 4-4z'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px
}

/* Dropdown panel styling */
.sx-select option{ color:#1C2A38; background:#fff; }
.sx-select optgroup{ color:#1C2A38; background:#fff; font-weight:600; }
.sx-select optgroup option{ color:#1C2A38; background:#fff; }

/* Button */
.sx-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 16px;
  background:transparent;color:#fff;border:1px solid #fff;cursor:pointer;
  white-space:nowrap;text-align:center;
}
.sx-btn:hover{background:#fff;color:#1C2A38}

/* Chart card */
.sx-tv{min-height:420px;border:1px solid #222;background:#1C2A38;padding:0}

.sx-note{font-size:12px;color:#9b9b9b;border-top:1px solid #222;padding:10px 12px}
.sx-signal p{margin:8px 0 0;font-size:13px;color:#9b9b9b;white-space:pre-line}
