.pw-compliance{
position:relative;
}
.pw-compliance-btn{
display:inline-flex;
align-items:center;
gap:8px;
height:var(--face);
padding:0 14px;
font-family:var(--ff2);
font-size:15px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--tx3);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
cursor:pointer;
transition:border-color .15s,color .15s;
user-select:none;
box-sizing:border-box;
}
.pw-compliance-btn:hover{
border-color:var(--cl1);
color:var(--cl1);
}
.pw-compliance.open .pw-compliance-btn{
border-color:var(--cl1);
color:var(--cl1);
}
.pw-compliance.has-preset .pw-compliance-btn{
background-color:rgba(255,85,17,0.15);
border-color:var(--cl1);
color:var(--cl1);
}
.pw-compliance.full-compliance .pw-compliance-btn{
background-color:rgba(153,204,51,0.15);
border-color:var(--cl2);
color:var(--cl2);
}
.pw-compliance-icon{
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
}
.pw-compliance-icon svg{
width:18px;
height:18px;
fill:currentColor;
}
.pw-compliance-arrow{
display:inline-block;
width:8px;
height:8px;
border-right:2.5px solid currentColor;
border-bottom:2.5px solid currentColor;
border-radius:0 0 2px 0;
transform:rotate(45deg);
margin-bottom:3px;
transition:transform .15s;
}
.pw-compliance.open .pw-compliance-arrow{
transform:rotate(-135deg);
margin-bottom:-3px;
}
.pw-compliance-menu{
position:absolute;
top:calc(100% + 6px);
left:50%;
transform:translateX(-50%);
width:340px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br2);
box-shadow:var(--fbs);
z-index:100;
display:none;
overflow:hidden;
}
.pw-compliance.open .pw-compliance-menu{
display:flex;
flex-direction:column;
}
.pw-compliance-header{
flex-shrink:0;
border-bottom:var(--bw1) solid var(--bc1);
}
.pw-compliance-body{
flex:1;
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:thin;
scrollbar-color:var(--bc2) transparent;
}
.pw-compliance-body::-webkit-scrollbar{
width:6px;
}
.pw-compliance-body::-webkit-scrollbar-track{
background:transparent;
}
.pw-compliance-body::-webkit-scrollbar-thumb{
background-color:var(--bc2);
border-radius:3px;
}
.pw-compliance-body::-webkit-scrollbar-thumb:hover{
background-color:var(--tx3);
}
.pw-compliance-body::-webkit-scrollbar-button{
display:none;
}
.pw-compliance-footer{
flex-shrink:0;
border-top:var(--bw1) solid var(--bc1);
padding:8px 10px 8px 16px;
min-height:18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.pw-cf-clear{
width:28px;
height:28px;
border-radius:var(--br0);
border:var(--bw1) solid var(--bc1);
background:transparent;
color:var(--tx3);
font-size:18px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
padding:0;
transition:border-color .15s,color .15s,background-color .15s;
}
.pw-cf-clear:hover{
border-color:var(--cl1);
color:var(--cl1);
background-color:var(--hv1);
}
.pw-cf-stat{
font-family:var(--ff2);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--tx3);
}
.pw-compliance-filters{
display:flex;
align-items:center;
gap:0;
}
.pw-cf{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
padding:10px 0;
cursor:pointer;
user-select:none;
transition:background-color .1s;
}
.pw-cf:hover{
background-color:var(--hv1);
}
.pw-cf input[type="checkbox"]{
position:absolute;
opacity:0;
width:0;
height:0;
pointer-events:none;
}
.pw-cf-dot{
width:14px;
height:14px;
border-radius:50%;
border:1.5px solid var(--bc2);
background:transparent;
transition:border-color .15s,background-color .15s;
flex-shrink:0;
}
.pw-cf:hover .pw-cf-dot{
border-color:var(--cl1);
}
.pw-cf input:checked+.pw-cf-dot{
border-color:var(--cl1);
background-color:var(--cl1);
}
.pw-cf-label{
font-family:var(--ff2);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--tx3);
}
.pw-cf:hover .pw-cf-label{
color:var(--cl1);
}
.pw-cf:has(input:checked) .pw-cf-label{
color:var(--cl1);
}
.pw-compliance-group{
padding:0;
border-bottom:var(--bw1) solid var(--bc1);
}
.pw-compliance-group:last-child{
border-bottom:none;
}
.pw-compliance-group-label{
padding:6px 16px 4px;
font-family:var(--ff2);
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:2px;
color:var(--tx3);
user-select:none;
background-color:rgba(128,128,128,0.06);
}
.pw-compliance-item{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
padding:9px 16px;
font-family:var(--ff1);
font-size:14px;
color:var(--tx1);
background:none;
border:none;
cursor:pointer;
text-align:left;
transition:background-color .1s,color .1s;
}
.pw-compliance-item:hover{
background-color:var(--hv1);
color:var(--cl1);
}
.pw-compliance-item.active{
background-color:rgba(255,85,17,0.12);
color:var(--cl1);
font-weight:600;
}
.pw-ci{
flex-shrink:0;
margin-left:12px;
font-family:var(--ff2);
font-size:13px;
font-weight:700;
line-height:1;
}
.pw-ci-pass{
color:var(--cl2);
}
.pw-ci-fail{
color:var(--tx3);
opacity:0.5;
}
.pw-ci-hint{
font-family:var(--ff3);
font-size:11px;
color:var(--tx3);
opacity:0.4;
margin-left:auto;
margin-right:8px;
white-space:nowrap;
}
.pw-compliance-item:hover .pw-ci-fail{
opacity:0.7;
}
.pw-compliance-item:hover .pw-ci-pass,
.pw-compliance-item.active .pw-ci-pass{
color:var(--cl2);
}
.pw-compliance-note{
position:absolute;
bottom:12px;
right:16px;
font-family:var(--ff1);
font-size:14px;
color:var(--tx3);
opacity:0.7;
pointer-events:none;
font-style:italic;
}
.pw-char-count{
position:absolute;
bottom:12px;
left:16px;
font-family:var(--ff3);
font-size:13px;
color:var(--tx3);
opacity:0.4;
pointer-events:none;
}
.tool-wrap .tool-header{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
flex-wrap:nowrap;
}
.tool-header-left{
display:flex;
align-items:center;
gap:8px;
justify-self:start;
}
.tool-header-right{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
justify-self:end;
}
.pw-length-control{
display:inline-flex;
align-items:center;
gap:0;
height:var(--face);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
box-sizing:border-box;
overflow:hidden;
justify-self:start;
}
.pw-length-control:hover{
border-color:var(--cl1);
}
.pw-length-input{
width:38px;
height:100%;
padding:0;
font-family:var(--ff3);
font-size:16px;
font-weight:700;
color:var(--tx1);
background:none;
border:none;
text-align:center;
outline:none;
cursor:pointer;
box-sizing:border-box;
user-select:none;
caret-color:transparent;
transition:color 60ms;
}
.pw-length-input:hover{
color:var(--cl1);
}
.pw-actions{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
margin-top:var(--gd2);
margin-bottom:var(--gap);
min-height:var(--face);
}
.pw-charsets{
position:relative;
}
.pw-charsets-btn{
display:inline-flex;
align-items:center;
gap:8px;
height:var(--face);
padding:0 14px;
font-family:var(--ff2);
font-size:15px;
font-weight:700;
letter-spacing:1px;
color:var(--tx3);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
cursor:pointer;
transition:border-color .15s,color .15s;
user-select:none;
box-sizing:border-box;
}
.pw-charsets-btn:hover{
border-color:var(--cl1);
color:var(--cl1);
}
.pw-charsets-btn.cs-full:hover{
border-color:var(--cl2);
color:var(--cl2);
}
.pw-charsets.open .pw-charsets-btn{
border-color:var(--cl1);
color:var(--cl1);
}
.pw-charsets.open .pw-charsets-btn.cs-full{
border-color:var(--cl2);
color:var(--cl2);
}
.pw-charsets-label{
white-space:nowrap;
transition:color .15s;
}
.pw-charsets-label.cs-full{
color:var(--cl2);
}
.pw-charsets-label.cs-low{
color:var(--cl1);
}
.pw-charsets-count{
font-family:var(--ff3);
font-size:13px;
font-weight:700;
letter-spacing:0;
color:var(--tx3);
}
.pw-charsets-count.cs-full{
color:var(--cl2);
}
.pw-charsets-count.cs-low{
color:var(--cl1);
}
.pw-charsets-arrow{
display:inline-block;
width:8px;
height:8px;
border-right:2.5px solid currentColor;
border-bottom:2.5px solid currentColor;
border-radius:0 0 2px 0;
transform:rotate(45deg);
margin-bottom:3px;
transition:transform .15s;
}
.pw-charsets.open .pw-charsets-arrow{
transform:rotate(-135deg);
margin-bottom:-3px;
}
.pw-charsets-menu{
position:absolute;
top:calc(100% + 6px);
left:0;
width:240px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br2);
box-shadow:var(--fbs);
z-index:100;
display:none;
overflow:hidden;
}
.pw-charsets.open .pw-charsets-menu{
display:block;
}
.pw-cs{
display:flex;
align-items:center;
min-height:44px;
padding:12px 16px;
cursor:pointer;
user-select:none;
transition:background-color .1s;
border-bottom:var(--bw1) solid var(--bc1);
box-sizing:border-box;
}
.pw-cs:last-child{
border-bottom:none;
}
.pw-cs:hover{
background-color:var(--hv1);
}
.pw-cs.active{
color:var(--cl1);
}
.pw-cs-name{
font-family:var(--ff1);
font-size:14px;
font-weight:600;
color:var(--tx1);
flex:1;
}
.pw-cs.active .pw-cs-name{
color:var(--cl1);
}
.pw-cs-chars{
font-family:var(--ff3);
font-size:12px;
font-weight:700;
color:var(--tx3);
margin-right:12px;
}
.pw-cs-state{
font-size:14px;
font-weight:700;
color:var(--tx3);
width:24px;
height:24px;
line-height:24px;
text-align:center;
flex-shrink:0;
}
.pw-cs[data-mode="cycle"][data-value="any"] .pw-cs-state{
font-size:22px;
}
.pw-cs.active .pw-cs-state{
color:var(--cl2);
}
.pw-actions .action-btn{
justify-self:center;
}
.pw-actions .tool-stats{
position:static;
transform:none;
justify-self:end;
}
.pw-len-arrow{
width:42px;
height:100%;
padding:0;
padding-bottom:3px;
font-size:32px;
font-weight:400;
line-height:1;
color:var(--tx3);
background:none;
border:none;
cursor:pointer;
outline:none;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.pw-len-arrow:hover{
color:var(--cl1);
}
.pw-output{
font-family:var(--ff3);
font-size:1.4rem;
letter-spacing:1px;
word-break:break-all;
cursor:text;
}
.pw-output:focus{
outline:none;
}
.tool-textarea-wrap:has(.pw-output):focus-within{
border-color:var(--cl1);
}
.pw-compliance-score{
font-family:var(--ff3);
font-size:13px;
font-weight:700;
margin-left:2px;
}
[class^="pw-"][class*="tool-stat"],
.pw-joke,.pw-terrible,.pw-pathetic,.pw-weak,.pw-meh,.pw-getting,
.pw-decent,.pw-respect,.pw-solid,.pw-fort,.pw-beast,.pw-nuclear,
.pw-god,.pw-overkill,.pw-paranoid,.pw-absurd,.pw-unhinged,
.pw-deranged,.pw-psychotic,.pw-cosmic,.pw-eternal,.pw-darkmatter,
.pw-bigbang,.pw-multiverse,.pw-simulation,.pw-matrix,.pw-why,
.pw-grass,.pw-outside,.pw-seekhelp,.pw-whohurt,.pw-novel,
.pw-areyouok,.pw-really{
font-family:var(--ff2);
font-size:var(--fz1);
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
}
.pw-stat-link{
text-decoration:none;
color:inherit;
cursor:pointer;
}
.pw-stat-link:hover{
color:var(--cl1) !important;
}
.pw-joke{
color:#b71c1c;
}
.pw-terrible{
color:var(--rd1);
}
.pw-pathetic{
color:#e65100;
}
.pw-weak{
color:#ef6c00;
}
.pw-meh{
color:var(--cl1);
}
.pw-getting{
color:#e8a020;
}
.pw-decent{
color:#e8b730;
}
.pw-respect{
color:#c5cc30;
}
.pw-solid{
color:var(--cl2);
}
.pw-fort{
color:#45bf45;
}
.pw-beast{
color:var(--cl3);
}
.pw-nuclear{
color:#0cd;
}
.pw-god{
color:#0ff;
}
.pw-overkill{
color:#a78bfa;
}
.pw-paranoid{
color:#f0f;
}
.pw-absurd{
color:#ff6bf6;
}
.pw-unhinged{
color:#ff4090;
}
.pw-deranged{
color:#ff2060;
}
.pw-psychotic{
color:#ff0040;
}
.pw-cosmic{
color:#e040ff;
}
.pw-eternal{
color:#b040ff;
}
.pw-darkmatter{
color:#9050ff;
}
.pw-bigbang{
color:#7060ff;
}
.pw-multiverse{
color:#5080ff;
}
.pw-simulation{
color:#30a0ff;
}
.pw-matrix{
color:#00c8ff;
}
.pw-why{
color:#00e0d0;
}
.pw-grass{
color:#00e890;
}
.pw-outside{
color:#50f060;
}
.pw-seekhelp{
color:#90f040;
}
.pw-whohurt{
color:#c0e830;
}
.pw-novel{
color:#e8d020;
}
.pw-areyouok{
color:#f0b010;
}
.pw-really{
color:#ff4020;
letter-spacing:2px;
}
.pw-info{
max-width:var(--pw3);
margin:var(--gt2) auto 0;
}
.pw-info-title{
font-family:var(--ff2);
font-size:var(--fz1);
font-weight:700;
text-transform:uppercase;
letter-spacing:2px;
color:var(--cl1);
margin:0 0 var(--gd2);
}
.pw-info p{
font-size:var(--fz1);
line-height:var(--lh1);
color:var(--tx2);
margin:0 0 var(--gd2);
}
.pw-info p:last-child{
margin-bottom:0;
}
.pw-refs{
margin-top:var(--gt2);
max-width:var(--pw3);
margin-left:auto;
margin-right:auto;
display:flex;
flex-direction:column;
gap:var(--gap);
}
.pw-refs-title{
font-family:var(--ff2);
font-size:var(--fz1);
font-weight:700;
text-transform:uppercase;
letter-spacing:2px;
color:var(--tx2);
margin:0;
}
.pw-refs-section-title{
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:2px;
color:var(--cl1);
margin:0 0 var(--gd2) 0;
}
.pw-refs table{
width:100%;
border-collapse:separate;
border-spacing:0;
border:1px solid rgba(128,128,128,0.12);
border-radius:var(--br3);
table-layout:fixed;
overflow:hidden;
}
.pw-refs col.pw-col-name{width:28%;}
.pw-refs col.pw-col-desc{width:18%;}
.pw-refs col.pw-col-updated{width:9%;}
.pw-refs col.pw-col-min{width:52px;}
.pw-refs col.pw-col-req{width:46px;}
.pw-refs th{
font-family:var(--ff2);
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--tx3);
text-align:center;
padding:8px;
border-bottom:1px solid rgba(128,128,128,0.12);
border-right:1px solid rgba(128,128,128,0.12);
white-space:nowrap;
}
.pw-refs th:last-child{
border-right:none;
}
.pw-refs th:first-child{
text-align:left;
}
.pw-refs th.pw-th-lower{
text-transform:none;
}
.pw-refs th:nth-child(2),
.pw-refs th:nth-child(3),
.pw-refs th:nth-child(4){
text-align:left;
}
.pw-refs td{
font-size:var(--fz1);
padding:7px 8px;
text-align:center;
color:var(--tx2);
border-bottom:1px solid rgba(128,128,128,0.12);
border-right:1px solid rgba(128,128,128,0.12);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.pw-refs tbody tr:last-child td{
border-bottom:none;
}
.pw-refs tbody tr{
transition:background-color .1s;
}
.pw-refs tbody tr:hover{
background-color:rgba(128,128,128,0.06);
}
.pw-refs td:first-child{
text-align:left;
font-weight:600;
color:var(--tx1);
white-space:normal;
}
.pw-refs-desc{
text-align:left !important;
font-weight:400 !important;
color:var(--tx3) !important;
font-size:13px !important;
white-space:normal !important;
}
.pw-refs-updated{
text-align:left !important;
color:var(--tx3) !important;
font-size:13px !important;
}
.pw-refs td:nth-child(4){
text-align:left;
}
.pw-refs tbody tr.pw-refs-pass{
background-color:rgba(76,175,80,0.22);
}
.pw-refs tbody tr.pw-refs-fail{
background-color:rgba(244,67,54,0.2);
}
.pw-refs tbody tr.pw-refs-pass:hover{
background-color:rgba(76,175,80,0.3);
}
.pw-refs tbody tr.pw-refs-fail:hover{
background-color:rgba(244,67,54,0.28);
}
.pw-refs td:last-child{
border-right:none;
}
.pw-refs-check{
color:var(--cl2);
font-weight:700;
}
.pw-refs-x{
color:rgba(128,128,128,0.25);
}
.pw-refs-link{
display:inline-flex;
align-items:center;
gap:6px;
color:inherit;
text-decoration:none;
transition:color .15s;
}
.pw-refs-link:hover{
color:var(--cl1);
}
.pw-refs-link:hover .pw-refs-name{
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
}
.pw-src-pdf-label{
font-size:inherit;
font-weight:400;
color:var(--tx3);
}
.pw-refs tbody tr.pw-refs-fail td.pw-refs-fail-cell{
background-color:rgba(244,67,54,0.18);
}
.pw-refs tbody tr.pw-refs-fail:hover td.pw-refs-fail-cell{
background-color:rgba(244,67,54,0.25);
}
.pw-cf .pw-cf-dot.pw-cf-all,
.pw-cf input+.pw-cf-dot.pw-cf-all{
border-color:var(--cl2);
background-color:var(--cl2);
}
.pw-cf:has(input+.pw-cf-all) .pw-cf-label{
color:var(--cl2);
}
.pw-cf .pw-cf-dot.pw-cf-partial,
.pw-cf input+.pw-cf-dot.pw-cf-partial{
border-color:var(--cl1);
background-color:var(--cl1);
}
.pw-cf:has(input+.pw-cf-partial) .pw-cf-label{
color:var(--cl1);
}
.pw-settings-wrap{
display:none;
}
@media(max-width:900px){
.pw-refs table{table-layout:auto;}
.pw-refs col.pw-col-desc,
.pw-refs th:nth-child(2),
.pw-refs td.pw-refs-desc{display:none;}
.pw-settings-wrap{
display:block;
position:relative;
}
.pw-settings-toggle{
display:flex;
align-items:center;
gap:8px;
height:var(--face);
padding:0 14px;
font-family:var(--ff2);
font-size:16px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:var(--tx3);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
cursor:pointer;
box-sizing:border-box;
}
.pw-settings-toggle svg{
width:18px;
height:18px;
fill:currentColor;
}
.pw-settings-toggle:hover,
.pw-settings-toggle.active{
border-color:var(--cl1);
color:var(--cl1);
}
.pw-settings-panel{
position:absolute;
top:calc(100% + 6px);
left:0;
z-index:100;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br2);
box-shadow:var(--fbs);
padding:var(--gd2);
display:none;
flex-direction:column;
gap:var(--gd2);
white-space:nowrap;
}
.pw-settings-panel.open{
display:flex;
}
.pw-settings-panel .pw-charsets{
position:relative;
}
.pw-settings-panel .pw-charsets-menu{
left:0;
}
.pw-settings-panel .pw-compliance{
position:relative;
}
.pw-settings-panel .pw-compliance-menu{
left:0;
transform:none;
}
.tool-header-left:empty{
display:none;
}
.pw-actions .tool-stats{
position:static;
transform:none;
width:auto;
justify-content:flex-end;
justify-self:end;
}
}