.pw { display: grid; gap: 18px; }
.pw-out { display: grid; gap: 12px; background: var(--ink); border-radius: 24px; padding: 24px; }
#pwd { font: 500 clamp(20px, 4vw, 32px)/1.3 var(--mono); color: var(--mint); word-break: break-all; min-height: 1.3em; }
.pw-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pw-btns .btn { background: var(--paper); color: var(--ink); }
.pw-btns .btn.ghost { background: transparent; color: var(--paper); border-color: var(--smoke); }
.meter { height: 10px; background: var(--mist); border-radius: 5px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 5px; transition: width .2s, background .2s; }
.strength { margin: -8px 0 0; color: var(--slate); }
.seg { display: flex; background: var(--mist); border-radius: 48px; padding: 4px; }
.seg button { flex: 1; height: 44px; border: 0; border-radius: 48px; background: transparent; font: 500 15px var(--sans); color: var(--slate); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.opt { display: grid; gap: 8px; font: 400 12px/1.3 var(--mono); text-transform: uppercase; color: var(--slate); }
.opt output { color: var(--ink); }
.opt input { accent-color: var(--ink); height: 44px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks[hidden] { display: none; }
.checks label { display: flex; gap: 8px; align-items: center; background: var(--mist); padding: 10px 14px; border-radius: 64px; font: 500 15px var(--sans); cursor: pointer; }
.checks input { width: 18px; height: 18px; accent-color: var(--ink); }
.note { margin: 0; color: var(--smoke); }