.pg-output{
  display:flex; align-items:center; gap:12px; flex-direction: column;
  background:#2f9e44; color:#fff; padding:20px; border-radius:12px;
  border:1px solid rgba(0,0,0,.12); box-shadow:var(--shadow);
}
.pg-output input{
  flex:1; font-size:28px; font-weight:700; color:#fff;
  background:transparent; border:none; outline:none;
  font-variant-numeric: tabular-nums; letter-spacing:.5px;
}
.pg-actions{ display:flex; gap:8px; }
.pg-btn{
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12);
  color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer;
}
.pg-btn.primary{ background:#ffd166; color:#37352f; border-color:#f5c04f; font-weight:700; }
.pg-btn:active{ transform: translateY(1px); }

.pg-strength{ margin:8px 2px 16px; display:flex; align-items:center; gap:8px; }
.pg-strength .dot{ width:12px;height:12px;border-radius:50%; display:inline-block; }
.pg-strength .dot.ok{ background:#a7f3d0; }

.pg-card{
  margin-top:10px; padding:16px; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow);
}
.pg-desc{ color:#6b7280; margin:0 0 10px; }
.pg-label{ font-weight:600; color:#374151; display:block; margin-bottom:6px; }

.pg-slider{ display:flex; align-items:center; gap:10px; }
.pg-slider input[type=range]{ flex:1; }
.pg-slider #pg-length-val{ min-width:36px; text-align:center; font-weight:700; }

.pg-options{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px; }
.pg-check{ display:flex; align-items:center; gap:8px; user-select:none; }

@media (max-width: 640px){
  .pg-output input{ font-size:22px; }
}