/* =========================
   PALETTE GENERATOR (scoped)
   ========================= */
.pl-root{
  --pl-radius: 10px;
  --pl-gap: 16px;
  --pl-pad: 12px;
  --pl-surface: #ffffff;
  --pl-surface-2: #f5f5f7;
  --pl-border: #e6e6ea;
  --pl-ink: #111;
  --pl-ink-2:#666;
  --pl-primary:#6c4df5;
  --pl-primary-ink:#fff;
  --pl-shadow: 0 10px 25px rgba(0,0,0,.06);
  --pl-shadow-soft: 0 4px 14px rgba(0,0,0,.06);
  color: var(--pl-ink);
}

.pl-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.pl-sr{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.pl-h2{ margin:0; margin-bottom:10px; font-size:1.75rem; }

.pl-container{ max-width:1250px; margin:0 auto; padding:0 38px 0 38px }

/* Pannello impostazioni */
.pl-panel{
  margin-top:18px;
  background:var(--pl-surface);
  border:1px solid var(--pl-border);
  border-radius:var(--pl-radius);
  padding:18px;
  box-shadow:var(--pl-shadow);
}

/* CONTROLLI: in riga, centrati in altezza, allineati a sinistra */
.pl-controls{
  display:grid;
  gap:var(--pl-gap);
  grid-template-columns: 1fr;           /* mobile: stack */
  align-items:center;                    /* centrare verticalmente i 4 blocchi nella riga */
  justify-items:start;                   /* allineamento sinistra dei blocchi */
}

/* cambiato da 768 a 1150 */
@media (min-width:1150px){
  .pl-controls{
    grid-template-columns: 1.4fr 1fr 1fr auto;  /* colore | armonia | variante | bottone */
  }
}

.pl-control{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;                /* label/select/hint allineati a sinistra */
  text-align:left;                       /* testo a sinistra */
}

/* Select */
.pl-control select{
  width: 280px;
}
/* Colore di Partenza */
.pl-swatch-btn {
  min-width: 150px;
}

@media (max-width:767px){
  .pl-control select,
  .pl-swatch-btn{ min-width: 100%; }
}

/* hint su una riga in desktop */
.pl-hint{
  color: var(--pl-ink-2);
  white-space: nowrap;
}
@media (max-width:767px){
  .pl-hint{ white-space: normal; }
}

/* trigger picker */
.pl-swatch-btn, .pl-btn-ghost{
  height:44px; border-radius:12px; border:1px solid var(--pl-border);
  background:var(--pl-surface-2); padding:0 12px;
}
.pl-swatch-btn{ display:flex; align-items:center; gap:10px; cursor:pointer; justify-content:flex-start; }
.pl-swatch-btn:focus-visible, .pl-btn-ghost:focus-visible, .pl-hue-slider:focus-visible{ outline:3px solid rgba(108,77,245,.35); outline-offset:2px; }

.pl-color-inline{ display:flex; align-items:center; gap:10px; }
.pl-swatch-chip{ width:44px; height:28px; border-radius:8px; border:1px solid var(--pl-border); }
.pl-hex-field{ display:inline-flex; align-items:center; color:var(--pl-ink-2); height:28px; }

/* Azioni: allineato a sinistra per essere in riga con gli altri controlli */
.pl-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-start; }

/* Titolo sezione palette */
.pl-section-title{ margin:28px 0 12px; display:flex; align-items:center; gap:10px; }
.pl-bar{ width:4px; height:26px; margin-bottom:9px; background:var(--pl-primary); border-radius:99px; }

/* Griglia risultati - cambiato da 768 a 1150 */
.pl-grid{ display:grid; gap:var(--pl-gap); grid-template-columns:1fr; }
@media (min-width:1150px){ .pl-grid{ grid-template-columns: repeat(4,1fr);} }

/* Card colore */
.pl-swatch{
  background:var(--pl-surface);
  border:1px solid var(--pl-border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--pl-shadow);
  display:flex; flex-direction:column;
}
.pl-swatch__color{
  min-height:160px;
  display:grid; place-items:center;
  font-weight:700; letter-spacing:.5px;
  font-size:22px; /* testo HEX grande e leggibile */
}
.pl-swatch__meta{ padding:var(--pl-pad); display:grid; gap:10px; background:#fff; }

/* Riga codice: pulsante in linea a destra, testo a sinistra con tua classe `extra-small` */
.pl-code-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--pl-surface-2);
  border:1px solid var(--pl-border);
  border-radius:12px;
  padding:8px 8px 8px 12px;
}
.pl-left.extra-small{ line-height:1.35; }
.pl-code-row .pl-value{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

.pl-copy{
  border:none; border-radius:10px; padding:8px 10px; background:#fff; cursor:pointer;
  display:flex; align-items:center; gap:6px; border:1px solid var(--pl-border);
  white-space: nowrap; /* evita a capo del bottone */
}
.pl-copy:hover{ transform:translateY(-1px); }
.pl-copy:focus-visible{ outline:3px solid rgba(108,77,245,.35); outline-offset:2px; }

.pl-live{ margin-top:10px; min-height:1.2em; }

/* --- COLOR PICKER POPOVER (scoped) --- */
.pl-picker-popover{
  position: absolute;
  z-index: 9999;
  margin-top: 10px;
  background:#fff;
  border:1px solid var(--pl-border);
  border-radius:16px;
  box-shadow:var(--pl-shadow);
  padding:12px;
  width: 320px;
}
.pl-picker-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pl-picker-current{ display:flex; align-items:center; gap:10px; }
.pl-picker-color{ width:28px; height:28px; border-radius:8px; border:1px solid var(--pl-border); }

.pl-btn-ghost{ height:32px; border-radius:10px; border:1px solid var(--pl-border); background:var(--pl-surface-2); padding:0 10px; cursor:pointer; }

.pl-sl-wrapper{ position:relative; margin-bottom:10px; }
.pl-sl-panel{
  position:relative;
  width:100%;
  height:180px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--pl-border);
  background: linear-gradient(to right, #fff, rgba(255,255,255,0)),
              linear-gradient(to top, #000, rgba(0,0,0,0));
}
.pl-cursor{
  position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.4);
  transform:translate(-50%, -50%);
}

.pl-hue-wrapper{ position:relative; height:16px; border-radius:999px; margin:12px 2px; background: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red); border:1px solid var(--pl-border); }
.pl-hue-slider{ position:relative; height:100%; border-radius:inherit; }
.pl-handle{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #0003; box-shadow:0 0 0 1px rgba(0,0,0,.35);
}

.pl-picker-fields{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-top:8px; }
.pl-picker-fields label{ display:block; margin-bottom:4px; color:var(--pl-ink-2); }
.pl-picker-fields input{ width:100%; height:36px; border:1px solid var(--pl-border); border-radius:10px; padding:0 8px; background:var(--pl-surface-2); }