/* Grid & cards */
.gscpd-wrap { --gscpd-cols: 1; }
.gscpd-grid { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width: 720px){ .gscpd-grid{ grid-template-columns:repeat(var(--gscpd-cols), minmax(0,1fr)); } }

.gscpd-card{
  border:1px solid #e5e7eb; background:#fff; border-radius:16px; padding:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); width:100%; margin:0 auto;
}
.gscpd-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gscpd-title{ font-weight:600; word-break:break-all; }
.gscpd-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.gscpd-stats{ display:flex; gap:16px; flex-wrap:wrap; margin:8px 0; font-size:13px; color:#374151; }

.gscpd-toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }

/* Inputs & buttons */
.gscpd-input,.gscpd-select,.gscpd-btn{
  border:1px solid #d1d5db; background:#fff; border-radius:12px;
  padding:8px 12px; font-size:14px; line-height:1.2; transition:all .15s ease;
}
.gscpd-input:focus,.gscpd-select:focus{ outline:none; box-shadow:0 0 0 3px rgba(236,72,153,.2); border-color:#ec4899; }
.gscpd-toggle{ accent-color:#ec4899; }
.gscpd-btn{ cursor:pointer; }
.gscpd-btn:hover{ box-shadow:0 1px 6px rgba(0,0,0,.08); }

.gscpd-primary{
  background:#ec4899; color:#fff; border-color:#ec4899;
}
.gscpd-primary:hover{ background:#db2777; border-color:#db2777; }
.gscpd-link{ text-decoration:none; }

/* Canvas wrapper: prevent infinite grow */
.gscpd-canvas-wrap{
  position: relative;
  width: 100%;
  height: 190px; /* overridden inline per card */
  overflow: hidden;
}
.gscpd-canvas{
  display:block;
  width:100% !important;
  height:100% !important; /* Chart.js fills wrapper instead of growing page */
}

/* Dark mode (auto) */
@media (prefers-color-scheme: dark){
  .gscpd-card{ background:#121417; border-color:#2a2f36; box-shadow:0 1px 2px rgba(0,0,0,.6); }
  .gscpd-stats{ color:#cbd5e1; }
  .gscpd-input,.gscpd-select,.gscpd-btn{ background:#0f1215; color:#e5e7eb; border-color:#2a2f36; }
  .gscpd-primary{ background:#f472b6; border-color:#f472b6; color:#0f1215; }
  .gscpd-primary:hover{ background:#fb7185; border-color:#fb7185; }
}

/* Force dark when parent has .gscpd-dark (Elementor section) */
.gscpd-dark .gscpd-card{ background:#121417; border-color:#2a2f36; color:#e5e7eb; }
.gscpd-dark .gscpd-input,.gscpd-dark .gscpd-select,.gscpd-dark .gscpd-btn{ background:#0f1215; color:#e5e7eb; border-color:#2a2f36; }
.gscpd-dark .gscpd-primary{ background:#f472b6; border-color:#f472b6; color:#0f1215; }