@import url('/css/toolkit.css');
.pw-out { display: grid; gap: .8rem; }
.pw-text { display: block; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); font-size: clamp(1.1rem, 2.6vw, 1.5rem); line-height: 1.5; letter-spacing: .02em; overflow-wrap: anywhere; word-break: break-all; min-height: 3.4rem; color: var(--text-1); }
.pw-text .d { color: var(--accent); }
.pw-text .s { color: #e0709a; }
.pw-meter { display: grid; gap: .45rem; }
.pw-bar { height: 10px; border-radius: 99px; background: var(--bg-2, var(--line)); overflow: hidden; }
.pw-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--pw-c, #888); transition: width .25s ease, background .25s ease; }
.pw-meter p { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; font-size: .86rem; color: var(--text-2); }
.pw-meter b { color: var(--pw-c, var(--text-1)); font-size: 1rem; }
.pw-len { display: grid; gap: .7rem; }
.pw-lenrow { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: .8rem; align-items: center; }
.pw-lenrow input[type=range] { width: 100%; accent-color: var(--accent); }
.pw-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .4rem; }
.pw-opt { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); cursor: pointer; font-size: .92rem; }
.pw-opt input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.pw-opt small { color: var(--text-3); margin-left: .3rem; font-family: var(--font-mono); }
.pw-adv { margin-top: .8rem; display: grid; gap: .6rem; }
.pw-adv summary { cursor: pointer; color: var(--text-2); font-size: .9rem; padding: .3rem 0; }
.pw-adv[open] summary { margin-bottom: .6rem; }
.pw-adv .pw-opt { margin-bottom: .6rem; }
.tk-item code.pw-code { overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 560px) { .pw-opts { grid-template-columns: 1fr; } }