/* minimal mirror of scraper styles (tweak as needed) */
.ws-widget{display:grid;grid-template-columns:1fr;gap:18px}
.ws-panel{background:#0b0b0b;color:#f8fafc;border-radius:12px;padding:16px;border:1px solid #1f2937}
.ws-panel h3{margin-top:0;margin-bottom:18px;font-size:18px}
.ws-field{position:relative;display:flex;gap:8px}
.ws-input,.ws-textarea{flex:1;border-radius:8px;border:1px solid #374151;background:#fff;color:#e5e7eb;padding:10px}
.ws-textarea{min-height:120px}
.ws-btn{background:#22c55e;color:#0b0b0b;border:none;border-radius:8px;padding:10px 14px;font-weight:600;cursor:pointer}
.ws-muted{color:#9ca3af;font-size:12px}
.ws-select{margin-left:8px;border-radius:8px;border:1px solid #fff;background:#fff;color:#000;padding:6px}
.ws-output{min-height:260px;border-radius:12px;padding:12px;overflow:auto}
.ws-actions{text-align:center;margin-top:18px}
.ws-output-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.chart-wrap{display:grid;gap:12px}
.chart-card{background:#0a0a0a;border:1px solid #1f2937;border-radius:12px;padding:12px}
@media (max-width:900px){.ws-widget{grid-template-columns:1fr}}

  /* Taller charts inside the Output panel */
  #stg-output .chart-frame {
    /* bump this to taste */
    height: 640px;
  }
  
  @media (max-width: 1280px) {
    #stg-output .chart-frame { height: 560px; }
  }
  @media (max-width: 782px) {
    #stg-output .chart-frame { height: 480px; }
  }
  
  /* Make sure Chart.js fills the container height */
  #stg-output .chart-surface canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }