#tool [hidden] { display: none !important; }
.pw-out { padding: 20px 16px 8px; }
.pw-one { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 12px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-ctl); }
.pw-value { font: 600 26px/1.35 var(--mono); text-align: center; overflow-wrap: anywhere; word-break: break-all; max-width: 100%; color: var(--ink); }
.pw-value .d { color: #2451E8; }
.pw-value .s { color: #C2185B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pw-value .d { color: #7D99FF; } :root:not([data-theme="light"]) .pw-value .s { color: #F48FB1; } } :root[data-theme="dark"] .pw-value .d { color: #7D99FF; } :root[data-theme="dark"] .pw-value .s { color: #F48FB1; }
.pw-one-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pw-list { margin: 0; padding: 6px 0; list-style: none; max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--code-bg); }
.pw-list li { display: flex; align-items: center; gap: 8px; padding: 2px 8px 2px 12px; font: 14px/1.5 var(--mono); }
.pw-list li span { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-all; }
.pw-list li:hover { background: var(--blue-tint); }
.pw-list .btn { width: 32px; height: 32px; padding: 0; justify-content: center; flex: none; }
.pw-strength { margin-top: 14px; }
.pw-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 420px; }
.pw-bar span { height: 8px; border-radius: 4px; background: var(--border); }
.pw-strength[data-level="1"] .pw-bar span:nth-child(-n+1) { background: var(--danger); }
.pw-strength[data-level="2"] .pw-bar span:nth-child(-n+2) { background: #E0A100; }
.pw-strength[data-level="3"] .pw-bar span:nth-child(-n+3) { background: var(--teal); }
.pw-strength[data-level="4"] .pw-bar span:nth-child(-n+4) { background: var(--teal-dark); }
.pw-meta { margin-top: 8px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pw-note { margin: 4px 0 0; }
.pw-opts { align-items: flex-start; }
.pw-g { width: 100%; }
.pw-len input[type="range"] { width: 220px; accent-color: var(--blue); }
.pw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-chips label { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; }
.pw-chips label:has(input:checked) { background: var(--blue-tint); border-color: transparent; color: var(--blue); font-weight: 600; }
.options .pw-sym input[type="text"] { width: 260px; font-family: var(--mono); }
.pw-adv { width: 100%; }
.pw-adv > summary { display: none; }
#tool > .notice { margin-top: 4px; }
.example pre { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .pw-out { order: 1; } #tool > .notice { order: 2; } .pw-opts { order: 3; }
}
@media (max-width: 768px) {
  .pw-out { padding: 14px 12px 6px; }
  .pw-value { font-size: 20px; }
  .pw-one-actions .btn { flex: 1; min-width: 140px; justify-content: center; }
  .pw-type { width: 100%; }
  .pw-type .segmented { display: flex; flex: 1; }
  .pw-type .segmented label { flex: 1; justify-content: center; min-height: 44px; }
  .pw-len { width: 100%; }
  .pw-len input[type="range"] { flex: 1; width: auto; min-width: 0; }
  .pw-chips { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .pw-chips label { justify-content: center; min-height: 44px; }
  .options .pw-sym input[type="text"] { width: 100%; flex: 1; }
  .pw-sym { width: 100%; flex-wrap: nowrap !important; }
  .pw-adv > summary { display: block; font-weight: 600; cursor: pointer; padding: 6px 0; }
  .pw-list .btn { width: 44px; height: 44px; }
  .pw-list li { font-size: 13px; }
}