.pz-flash{ margin-top: 1.5rem; }
.pz-form{ margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.pz-form[id]{ scroll-margin-top: 6.5rem; }
.pz-draft{
margin: 0 0 1.75rem;
padding: 0.75rem 1rem;
border: 1px solid var(--mint-line);
border-radius: 0.8rem;
background: var(--mint-soft);
color: var(--text);
font-size: 0.9rem;
}
.pz-draft-clear{
padding: 0;
border: 0;
background: none;
color: var(--mint);
font: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.pz-grid{
display: grid;
grid-template-columns: minmax(0, 1fr) 20rem;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
}
.pz-steps{ display: flex; flex-direction: column; gap: clamp(2.2rem, 4vw, 2.8rem); min-width: 0; }
.pz-step{ border: 0; margin: 0; padding: 0; min-width: 0; }
.pz-step > legend{ float: left; width: 100%; padding: 0; }
.pz-step > legend ~ *{ clear: both; }
.pz-q{
display: block;
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
margin-bottom: 1rem;
}
.pz-step > .pz-q:has(+ .pz-hint){ margin-bottom: 0.35rem; }
.pz-hint{ color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }
.pz-card input,.pz-chip input{
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.pz-cards{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.pz-card{
position: relative;
display: flex;
align-items: center;
gap: 0.9rem;
min-height: 4.4rem;
padding: 0.9rem 1.1rem;
border: 1px solid var(--line);
border-radius: 1.1rem;
background: linear-gradient(170deg, rgba(var(--wash-rgb), 0.05), rgba(var(--wash-rgb), 0.012));
color: var(--muted);
cursor: pointer;
transition:
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
background-color 0.35s var(--ease-out),
box-shadow 0.35s var(--ease-out);
}
.pz-card-ico{
width: 2.5rem;
height: 2.5rem;
flex: none;
border-radius: 0.8rem;
border: 1px solid var(--line);
background: var(--shell);
color: var(--muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.pz-card-ico .ico{ width: 1.25rem; height: 1.25rem; }
.pz-card-name{ flex: 1; min-width: 0; font-size: 0.98rem; font-weight: 500; line-height: 1.3; }
.pz-check{
width: 1.15rem;
height: 1.15rem;
flex: none;
color: var(--mint);
opacity: 0;
transform: scale(0.6);
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.pz-card:has(input:checked){
color: var(--text);
border-color: var(--mint-line);
background: linear-gradient(170deg, rgba(var(--mint-rgb), 0.12), rgba(var(--mint-rgb), 0.03));
box-shadow: 0 18px 40px -28px rgba(var(--mint-rgb), 0.55);
}
.pz-card:has(input:checked) .pz-card-ico{
color: var(--mint-ink);
border-color: transparent;
background-image: var(--grad);
}
.pz-card:has(input:checked) .pz-check{ opacity: 1; transform: none; }
.pz-card:has(input:focus-visible){ outline: 2px solid var(--mint); outline-offset: 3px; }
.pz-chips{ display: flex; flex-wrap: wrap; gap: 0.55rem; }
.pz-chip{ position: relative; cursor: pointer; }
.pz-chip span{
display: inline-block;
padding: 0.6rem 1.05rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--shell);
color: var(--muted);
font-size: 0.92rem;
transition:
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
background-color 0.35s var(--ease-out);
}
.pz-chip input:checked + span{
color: var(--mint-ink);
border-color: transparent;
background-image: var(--grad);
font-weight: 600;
}
.pz-chip input:focus-visible + span{ outline: 2px solid var(--mint); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine){
.pz-card:not(:has(input:checked)):hover{ color: var(--text); border-color: var(--mint-line); }
.pz-card:not(:has(input:checked)):hover .pz-card-ico{ color: var(--mint); border-color: var(--mint-line); }
.pz-chip input:not(:checked) + span:hover{ color: var(--text); border-color: var(--mint-line); background: var(--mint-soft); }
}
.pz-site{ display: none; margin-top: 1rem; max-width: 26rem; }
.pz-step:has(input[data-da]:checked) .pz-site{ display: flex; }
.pz-fields{ display: flex; flex-direction: column; gap: 1rem; }
.pz-step.invalid .field-err{ display: block; }
.pz-step.invalid .pz-card{ border-color: rgba(var(--err-rgb), 0.55); }
.pz-sum{ position: sticky; top: 6.5rem; }
.pz-sum-card{
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1.4rem;
border: 1px solid var(--line);
border-radius: 1.3rem;
background: linear-gradient(170deg, rgba(var(--wash-rgb), 0.055), rgba(var(--wash-rgb), 0.015));
}
.pz-sum-card h2{
display: flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.3rem;
}
.pz-sum-card h2 svg{ width: 1.15rem; height: 1.15rem; color: var(--mint); flex: none; }
.pz-sum-row{ display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); }
.pz-sum-row strong{ color: var(--text); font-weight: 600; }
.pz-meter{
display: block;
height: 6px;
border-radius: 999px;
background: rgba(var(--wash-rgb), 0.09);
overflow: hidden;
}
.pz-meter-fill{
display: block;
height: 100%;
border-radius: inherit;
background-image: var(--grad);
transform: scaleX(var(--p, 0));
transform-origin: left center;
transition: transform 0.5s var(--ease-out);
}
.pz-sum-label{
margin: 0.5rem 0 0;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--faint);
}
.pz-sum-tags{ display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pz-sum-list{ display: flex; flex-direction: column; gap: 0.7rem; margin: 0.4rem 0 0; }
.pz-sum-list div{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.9rem; }
.pz-sum-list dt{ color: var(--muted); flex: none; }
.pz-sum-list dd{ margin: 0; color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pz-sum-note{
margin: 0.4rem 0 0;
padding-top: 0.9rem;
border-top: 1px solid var(--line);
color: var(--faint);
font-size: 0.78rem;
text-align: center;
}
.pz-fail{ margin-top: 2rem; }
.pz-bar{
position: sticky;
bottom: 1rem;
z-index: 5;
display: flex;
align-items: center;
gap: 1.2rem;
margin-top: 2rem;
padding: 0.65rem 0.65rem 0.65rem 1.3rem;
border: 1px solid var(--line-strong);
border-radius: 1.3rem;
background: var(--glass-panel);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
box-shadow: 0 24px 50px -24px rgba(var(--shadow-rgb), 0.6);
}
.pz-bar-txt{ margin: 0; color: var(--muted); font-size: 0.92rem; white-space: nowrap; }
.pz-bar-txt strong{ color: var(--text); font-weight: 600; }
.pz-bar .pz-meter{ width: 8rem; flex: none; }
.pz-bar .pz-submit{ margin: 0 0 0 auto; }
.pz-note{ margin-top: 1rem; text-align: center; }
.pz-note a{ color: var(--mint); }
.pz-success{ margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 40rem; }
.pz-opt{ color: var(--muted); font-weight: 400; font-size: 0.85em; }
.pz-success-steps{
margin: 0.4rem 0 1.4rem;
padding-left: 1.2rem;
color: var(--muted);
font-size: 0.95rem;
text-align: left;
display: grid;
gap: 0.35rem;
}
.pz-next{ margin-top: clamp(3.5rem, 7vw, 5rem); }
.pz-next .kt-quick{ margin-top: 0; }
@media (max-width: 1020px){
.pz-grid{ grid-template-columns: 1fr; }
.pz-sum{ position: static; }
}
@media (max-width: 560px){
.pz-cards{ gap: 0.6rem; }
.pz-card{
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
min-height: 0;
padding: 0.85rem 0.85rem 0.95rem;
}
.pz-card-ico{ width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; }
.pz-card-ico .ico{ width: 1.1rem; height: 1.1rem; }
.pz-card-name{ font-size: 0.9rem; }
.pz-check{ position: absolute; top: 0.8rem; right: 0.8rem; }
.pz-bar{ gap: 0.8rem; padding-left: 1rem; }
.pz-bar .pz-meter{ display: none; }
}
@media (max-width: 768px){
.pz-sum-label{
font-size: 0.75rem;
}
}