/* 8.ro */
.pw-len, .pw-wide { grid-column: 1 / -1; }
.pw-len { display: flex; flex-direction: column; gap: 6px; }
.pw-len-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: 12px; align-items: center; }
.pw-range { width: 100%; accent-color: var(--accent); min-height: 32px; }
.pw-wide code { font-family: var(--mono); font-size: .8125rem; color: var(--muted); margin-left: 4px; }
.pw-big { font-family: var(--mono); font-weight: 650; letter-spacing: .02em; font-size: clamp(1.15rem, 3.2vw, 1.6rem); overflow-wrap: anywhere; word-break: break-all; }
.pw-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px 18px 0; }
.pw-meter span { height: 8px; border-radius: 99px; background: var(--surface-3); }
.pw-meter[data-grade="weak"] span:nth-child(-n+1),
.pw-meter[data-grade="fair"] span:nth-child(-n+2),
.pw-meter[data-grade="good"] span:nth-child(-n+3),
.pw-meter[data-grade="strong"] span { background: var(--accent); }
.pw-meter[data-grade="weak"] span:nth-child(-n+1) { background: var(--err); }
.pw-bits { padding-top: 8px; }
.pw-out { margin: 0 18px 18px; width: calc(100% - 36px); min-height: 5rem; }