:root { color-scheme: dark; }

#giveaways-root{
  display:flex;
  flex-direction:column;
  gap:14px;

  /* ✅ Center everything across all tabs */
  max-width: 1280px;
  margin: 0 auto;
}

/* Top tabs */
.ps-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center; /* ✅ */
}

.ps-tabs button{
  border-radius:999px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  font-weight:700;
}
.ps-tabs button.active{
  background:rgba(45,212,191,.14);
  border-color:rgba(45,212,191,.30);
}

/* Cards */
.ps-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
}

.ps-grid-2{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:14px;
}
@media (max-width:980px){
  .ps-grid-2{ grid-template-columns:1fr; }
}

.ps-vstack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ps-panel-editor-grid{
  display:grid;
  /* minmax(0, …) prevents the grid from overflowing when children are wide */
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap:14px;
  align-items:start;
}

@media (max-width:980px){
  .ps-panel-editor-grid{ grid-template-columns:1fr; }
}

.ps-panel-editor-preview{
  display:flex;
  justify-content:center;
  align-items:center;
  /* Allow the preview column to shrink inside the grid without
     forcing overflow (previews use wide iframes internally). */
  min-width:0;
}

.ps-panel-editor-controls{
  min-width:0;
}

/* Make sure preview wrappers can never overflow into the controls column */
.ps-panel-editor-preview > *{ max-width:100%; }

/* Live State */
.ps-live-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:14px;
}
@media (max-width:980px){
  .ps-live-grid{ grid-template-columns:1fr; }
}
.ps-live-box{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
}
.ps-live-title{
  font-size:13px;
  font-weight:800;
  margin:0 0 8px 0;
  opacity:.95;
}
.ps-live-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ps-live-row:last-child{ border-bottom:none; }
.ps-muted{ opacity:.75; }

/* Forms */
.ps-form{ display:grid; gap:10px; }

.ps-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:980px){
  .ps-row-2{ grid-template-columns:1fr; }
}

label.ps-label{
  display:grid;
  gap:6px;
  font-size:13px;
  opacity:.9;
}

.ps-input,.ps-select,.ps-textarea{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:#e7f0ff;
  padding:10px 10px;
  outline:none;
}

.ps-inline{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
}

.ps-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.ps-actions button{
  border-radius:14px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  font-weight:800;
}

.ps-actions button.primary{
  background:rgba(45,212,191,.16);
  border-color:rgba(45,212,191,.35);
}

.ps-actions button.danger{
  background:rgba(248,113,113,.14);
  border-color:rgba(248,113,113,.30);
}

/* Lists */
.ps-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.ps-li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.ps-btn-mini{
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  font-weight:800;
  font-size:12px;
}
.ps-btn-mini:hover{ background:rgba(255,255,255,.10); }

.ps-name{ font-weight:900; letter-spacing:.2px; }

/* Commands */
.ps-command{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:12px;
}
.ps-copy{
  width:34px;height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  font-weight:900;
}

/* ✅ Challenge layout: engine full row, then Questions wide + Categories narrow */
.ps-challenge-wrap{
  display:grid;
  gap:14px;
}

.ps-challenge-grid{
  display:grid;
  grid-template-columns: 1.35fr 0.65fr; /* Questions wider */
  gap:14px;
}
@media (max-width:980px){
  .ps-challenge-grid{ grid-template-columns:1fr; }
}

/* checkbox wrap for categories */
.ps-cats{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
}

/* Sources */
.ps-source-row{
  display:grid;
  grid-template-columns: 220px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  margin-top:8px;
}

/* Sources previews */
.ps-preview-viewport{
  position:relative;
  overflow:hidden;
  max-width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.95);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.ps-preview-frame{
  display:block;
}
.ps-source-name{ font-weight:900; }
.ps-source-url{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:12px;
  opacity:.92;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* table */
.ps-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}