/* Password Generator – minimal, responsive, platform-friendly */
.pw-wrap{ padding: 1.2rem; }
.pw-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  margin-bottom: 1rem;
}
.pw-grid{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 1.2rem;
  align-items:start;
}
@media (max-width: 900px){
  .pw-grid{ grid-template-columns: 1fr; }
  .pw-header{ align-items:center; }
}

.pw-stage{
  display:flex; flex-direction:column; gap: 1rem;
}

.pw-output{
  padding: 1.1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.pw-output-top{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom: .6rem;
}
.pw-label{ font-weight: 700; font-size: .95rem; }

.pw-badge{
  display:inline-flex; align-items:center;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .02em;
}

.pw-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.25;
  word-break: break-all;
  padding: .85rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  outline: none;
  user-select: all;
}
.pw-value:focus{ outline: 2px solid rgba(255,255,255,.22); outline-offset: 2px; }

.pw-meter{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  margin: .75rem 0 .35rem;
}
.pw-meter-bar{
  height:100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce){
  .pw-meter-bar{ transition:none; }
}

.pw-meta{ font-size: .92rem; }

.pw-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top: .85rem;
}

.pw-hint{ font-size: .92rem; }
.pw-hint kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: .12rem .38rem;
  border-radius: .45rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
}

.pw-panel-card{
  padding: 1.1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.pw-panel-title{ margin:0 0 .85rem; font-size: 1.1rem; }

.field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom: 1rem; }
.field-label{ font-weight:700; font-size:.95rem; opacity:.9; }
.field-help{ font-size: .92rem; }

.range{
  width:100%;
  accent-color: currentColor;
}

.check{
  display:flex; align-items:flex-start; gap:.55rem;
  padding: .38rem .45rem;
  border-radius: 12px;
  border: 1px solid transparent;
}
.check input{ margin-top: .15rem; }
.check:hover{ border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.03); }

.pw-note{
  margin-top: .8rem;
  padding: .85rem .9rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.pw-note-title{ font-weight:800; margin-bottom: .4rem; }
.pw-note-list{ margin:0; padding-left: 1.15rem; }
.pw-note-list li{ margin: .25rem 0; }

.pw-toast{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  padding: .6rem .75rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  pointer-events:none;
}
.pw-toast.show{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .pw-toast{ transition: none; }
}