:root{
  --ynm-cpe-border:#e5e7eb;
  --ynm-cpe-bg:#ffffff;
  --ynm-cpe-muted:#6b7280;
  --ynm-cpe-text:#111827;
  --ynm-cpe-primary:#167559;
  --ynm-cpe-primary-2:#1b8467;
  --ynm-cpe-radius:12px;
} 

.ynm-color-palette{
  max-width:980px;
  margin:20px auto;
  padding:18px;
  border:1px solid var(--ynm-cpe-border);
  border-radius:var(--ynm-cpe-radius); 
  background:var(--ynm-cpe-bg);
  color:var(--ynm-cpe-text);
}

.ynm-cpe__title{margin:0 0 8px;font-size:26px;line-height:1.2}
.ynm-cpe__desc{margin:0 0 14px;color:var(--ynm-cpe-muted);font-size:14px;line-height:1.55}

.ynm-cpe__controls{
  display:grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap:12px;
  align-items:end;
  margin-bottom:14px;
}
@media (max-width:860px){
  .ynm-cpe__controls{grid-template-columns:1fr;align-items:stretch}
}

.ynm-cpe__controls label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ynm-cpe-muted)}

.ynm-cpe__file{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ynm-cpe-muted)}
.ynm-cpe__file-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ynm-cpe__file-name{color:var(--ynm-cpe-muted);font-size:13px;overflow-wrap:anywhere}

/* Visually hide native input (browser-dependent label text), keep it functional for JS click */
.ynm-cpe__file-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.ynm-cpe__range-row{display:flex;gap:10px;align-items:center}
.ynm-cpe__range-row input[type=range]{width:100%}
.ynm-cpe__count{font-variant-numeric:tabular-nums;color:var(--ynm-cpe-text)}

.ynm-cpe__preview{
  border:1px solid var(--ynm-cpe-border);
  border-radius:10px;
  padding:10px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ynm-cpe__placeholder{
  width:100%;
  padding:18px;
  border:1px dashed var(--ynm-cpe-border);
  border-radius:10px;
  color:var(--ynm-cpe-muted);
  background:#fafafa;
  font-size:14px;
  text-align:center;
}
.ynm-cpe__preview img{
  display:block;
  max-width:100%;
  max-height:560px;
  width:auto;
  height:auto;
  margin:0 auto;
  border-radius:8px;
  object-fit:contain;
}
.ynm-cpe__preview img[hidden]{display:none !important;}

.ynm-cpe__palette{margin-top:14px}

.ynm-cpe__swatches{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
}

.ynm-cpe__swatch{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:10px;
  min-height:74px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  padding:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}
.ynm-cpe__swatch:focus{outline:2px solid rgba(22,117,89,.55);outline-offset:2px}

.ynm-cpe__swatch-hex{
  width:100%;
  background:rgba(255,255,255,0.82);
  color:#111827;
  font-size:12px;
  padding:8px 10px;
  text-align:left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.ynm-cpe__note{margin-top:10px;color:var(--ynm-cpe-muted);font-size:12px;line-height:1.4}

/* Button style (scoped) */
.ynm-color-palette .ynm-wc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--ynm-cpe-border);
  background:#fff;
  color:var(--ynm-cpe-text);
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
}
.ynm-color-palette .ynm-wc-btn:hover{border-color:#cbd5e1}
.ynm-color-palette .ynm-wc-btn--primary{
  background:linear-gradient(180deg,var(--ynm-cpe-primary-2),var(--ynm-cpe-primary));
  border-color:transparent;
  color:#fff;
}
.ynm-color-palette .ynm-wc-btn--primary:hover{filter:brightness(1.03)}
.ynm-color-palette .ynm-wc-btn:disabled{opacity:.55;cursor:not-allowed}