/* Shared PFP Pro styles – Dark Mode */
.pfp-pro {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 18px;
  margin: 18px 0;
}

/* Stage (left preview area) */
.pfp-pro .stage {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Main canvas */
#pfpCanvas {
  width: 100%;
  max-width: 700px;
  background: #000;                 /* was #111 → true black for dark bg */
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Controls card (right pane) */
.controls {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: 8px;
  color: var(--ink);
}
.controls .row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin: 6px 0;
}
.controls .row input[type=range] { width: 220px; }

/* Button group */
.controls .btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Buttons – force white text for contrast */
.btn {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #2a2a2a;             /* was #f2f4f8 → dark neutral */
  color: #fff;                      /* ensure readable on dark */
  cursor: pointer;
  font-weight: 800;
}
.btn:hover { background: #343434; }

/* Primary action */
.btn.primary {
  background: #22c55e;
  border-color: #16a34a;
  color: #fff;                      /* was #04150c → white on green */
}
.btn.primary:hover { background: #1fb155; }

/* Ghost (minimal) */
.btn.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid var(--border);
}
.btn.ghost:hover { background: rgba(255,255,255,.06); }

/* Pills (toggles) */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--ink);
  background: rgba(255,255,255,.03);
}
.pill:hover { background: rgba(255,255,255,.08); }
.pill.active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0284c7;
}

/* Headings & help text */
.controls h3 { margin: 8px 0; }
.small { font-size: 12px; color: var(--muted); }

/* Layer list */
.layer-list {
  max-height: 160px;
  overflow: auto;
  border: 1px dashed var(--border);
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.02);  /* subtle dark fill */
}
.layer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
}

/* Responsive */
@media (max-width:980px) {
  .pfp-pro { grid-template-columns: 1fr; }
}
/* Let fingers drag on the canvas without scrolling the page */
#pfpCanvas {
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}
#pfpCanvas { touch-action:none; -webkit-user-drag:none; user-select:none; }


/* Background templates */
.bg-templates { margin: 10px 0; }
.bg-title { font-weight: 800; margin-bottom: 6px; }
.bg-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bg-thumb {
  position: relative; width: 100%; padding-top: 66%;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer;
}
.bg-thumb img, .bg-thumb canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.bg-thumb.active { outline: 2px solid #0ea5e9; }
.bg-thumb.clear::after {
  content: "Clear"; position:absolute; inset:0; display:grid; place-items:center;
  background: rgba(0,0,0,.55); color:#fff; font-weight:800; font-size:12px;
}