.glazing-quiz {
    --blue: #0f60ef;
    --ink: #142c50;
    --muted: #50627b;
    --line: #d6e1f0;
    color: var(--ink);
    padding-bottom: clamp(45px, 6vw, 80px);
    scroll-margin-top: 16px;
    font-size: 16px;
    line-height: 1.45;
}

.glazing-quiz[hidden], .glazing-quiz [hidden], .quiz-definitions { display: none; }
.quiz-shell {
    display: grid;
    grid-template-columns: minmax(270px, 0.85fr) minmax(0, 1.65fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: white;
    box-shadow: 0 14px 44px rgba(25, 64, 127, .09);
}
.quiz-cover {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 2.8vw, 38px);
    overflow: hidden;
    background: radial-gradient(ellipse at 100% 100%, #357fd5, transparent 66%), #123e92;
    color: #fff;
}
.quiz-cover::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 28% 0 0;
    pointer-events: none;
    background: radial-gradient(circle, #c2e7ff 1px, transparent 1.25px) 0 0 / 12px 12px;
    mask-image: radial-gradient(ellipse at 88% 100%, #000 6%, transparent 73%);
    opacity: .24;
}
.quiz-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #e0edff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.quiz-kicker::before { content: ""; width: 23px; height: 3px; background: #ffd052; }
.quiz-cover h2 {
    margin: 18px 0 14px;
    font-size: clamp(32px, 3.1vw, 46px);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 800;
}
.quiz-intro { color: #e4efff; max-width: 32ch; }
.quiz-cover-footer {
    display: grid;
    grid-template-columns: minmax(128px, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #ffffff40;
}
.quiz-drawing { display: block; width: 100%; height: auto; opacity: .8; }
.quiz-rewards h3 { font-size: 20px; font-weight: 800; line-height: 1.2; }
.quiz-ticket {
    --stub: 56px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    border-radius: 12px;
    overflow: hidden;
    color: var(--ink);
    background: #fffdfa;
    mask: radial-gradient(circle at 0 var(--stub), transparent 4px, black 5px) left / 51% 100% no-repeat,
          radial-gradient(circle at 100% var(--stub), transparent 4px, black 5px) right / 51% 100% no-repeat;
}
.quiz-ticket li { display: flex; gap: 11px; align-items: center; padding: 6px 16px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.quiz-ticket li:not(.quiz-discount)::before {
    content: "";
    flex: none;
    align-self: flex-start;
    width: 10px;
    height: 6px;
    margin-top: 4px;
    border: solid #1962ce;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
}
.quiz-ticket li:nth-child(2) { padding-top: 13px; }
.quiz-ticket li:last-child { padding-bottom: 14px; }
.quiz-ticket small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.quiz-ticket .quiz-discount { height: var(--stub); border-bottom: 1px dashed #b98c32; background: linear-gradient(110deg, #ffdf89, #ffcc55); color: #382e1e; }
.quiz-discount strong { margin-left: auto; font-size: 32px; line-height: 1; letter-spacing: -.045em; font-weight: 800; }
.quiz-expert { display: flex; align-items: center; gap: 10px; }
.quiz-expert img { flex: none; border-radius: 50%; box-shadow: 0 0 0 2px #afcdf9; }
.quiz-expert strong, .quiz-expert span { display: block; }
.quiz-expert span { color: #e3eeff; font-size: 13px; }
.quiz-panel { min-width: 0; align-self: center; padding: clamp(24px, 3.7vw, 50px); }
.quiz-steps { margin-bottom: 25px; }
.quiz-steps p { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; font-size: 13px; font-weight: 700; }
#quiz-count { color: var(--blue); }
#quiz-stage { color: var(--muted); }
.quiz-segments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.quiz-segments i { height: 4px; border-radius: 4px; background: #e5ecf6; }
.quiz-segments i.is-filled { background: var(--blue); }
.glazing-quiz fieldset { border: 0; min-width: 0; margin: 0; padding: 0; }
.glazing-quiz legend, .quiz-result > h3 {
    display: block;
    padding: 0;
    color: var(--ink);
    font-size: clamp(24px, 2.25vw, 32px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -.025em;
}
.quiz-hint, .quiz-result > p { margin: 8px 0 21px; color: var(--muted); }
.quiz-grid, .quiz-contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quiz-list { display: grid; gap: 9px; }
.quiz-choice {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    min-height: 58px;
    padding: 13px 37px 13px 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.25;
}
.quiz-choice input { position: absolute; right: 13px; width: 17px; height: 17px; accent-color: var(--blue); }
.quiz-choice:has(input:checked) { border-color: var(--blue); background: #eef5ff; box-shadow: inset 0 0 0 1px var(--blue); }
.quiz-choice-icon { width: 25px; height: 25px; flex: none; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.quiz-other { grid-column: 1 / -1; min-height: 44px; font-weight: 500; }
.quiz-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quiz-products .quiz-choice { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 10px 12px; font-size: 14px; }
.quiz-products input { top: 11px; right: 10px; }
.quiz-products img { width: 65px; height: 43px; object-fit: contain; mix-blend-mode: multiply; }
.quiz-list .quiz-choice { min-height: 50px; }
.quiz-field { display: block; font-size: 15px; font-weight: 700; }
.quiz-field small { font-weight: 400; color: var(--muted); font-size: 13px; }
.quiz-detail, .quiz-contacts { margin-top: 16px; }
.quiz-field input, .quiz-field textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    margin-top: 5px;
    border: 1px solid #aabbd0;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
}
.quiz-field textarea { resize: vertical; }
.quiz-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; color: var(--muted); font-size: 14px; cursor: pointer; }
.quiz-consent input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--blue); }
.quiz-consent a, .quiz-restart { color: #174fae; text-decoration: underline; }
#quiz-summary { padding: 7px 14px; background: #f4f7fc; border-radius: 10px; }
.quiz-summary-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; overflow-wrap: anywhere; }
.quiz-summary-row + .quiz-summary-row { border-top: 1px solid var(--line); }
.quiz-summary-row b { display: block; color: var(--muted); font-size: 12px; }
.glazing-quiz button { font-family: inherit; cursor: pointer; }
.quiz-edit, .quiz-back, .quiz-restart { background: transparent; border: 0; font-weight: 700; }
.quiz-edit { color: #174fae; padding: 7px 0 7px 6px; }
.quiz-back, .quiz-restart { font-size: 15px; padding: 10px 0; }
.quiz-back { color: var(--muted); }
.quiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.quiz-next { display: inline-flex; align-items: center; justify-content: center; gap: 24px; margin-left: auto; padding: 12px 21px; min-height: 46px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 800; }
.quiz-next [aria-hidden] { font-size: 20px; line-height: 1; }
.glazing-quiz button:disabled { opacity: .6; cursor: wait; }
.quiz-error:not(:empty) { margin-top: 12px; color: #9d2522; font-weight: 700; }
.quiz-choice:has(:focus-visible), .glazing-quiz :is(button, a, input, textarea):focus-visible { outline: 3px solid #114daf !important; outline-offset: 3px; }
.quiz-result { padding: 20px 0; }
.quiz-tick { display: inline-grid; place-items: center; margin-bottom: 20px; width: 50px; height: 50px; border-radius: 50%; background: #e8f2ff; color: var(--blue); font-size: 27px; }
@media (hover: hover) {
    .quiz-choice:hover { border-color: #7ba8ef; }
    .quiz-next:hover { background: #104fc1; }
    .quiz-edit:hover, .quiz-back:hover { text-decoration: underline; }
}
@media (max-width: 990px) {
    .glazing-quiz, .glazing-quiz form, .glazing-quiz :is(input, textarea, button, h3) { scroll-margin-top: 64px; }
}
@media (max-width: 800px) {
    .quiz-shell { grid-template-columns: minmax(0, 1fr); }
    .quiz-cover { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; padding: 25px; }
    .quiz-cover-copy { min-width: 0; }
    .quiz-cover .quiz-rewards { grid-column: 2; grid-row: 1 / 3; align-self: center; }
    .quiz-cover h2 { margin: 10px 0; max-width: 18ch; }
    .quiz-cover::before { mask-image: radial-gradient(ellipse at 30% 100%, #000, transparent 75%); }
    .quiz-intro { max-width: 52ch; }
}
@media (max-width: 520px) {
    .quiz-shell { border-radius: 15px; }
    .quiz-cover { display: flex; padding: 20px; gap: 16px; }
    .quiz-cover .quiz-rewards { align-self: stretch; }
    .quiz-cover-copy { max-width: none; }
    .quiz-cover h2 { font-size: 27px; }
    .quiz-intro { font-size: 14px; }
    .quiz-cover::before { mask-image: radial-gradient(ellipse at 88% 100%, #000, transparent 75%); }
    .quiz-rewards h3 { font-size: 18px; }
    .quiz-ticket { --stub: 43px; margin-top: 8px; }
    .quiz-ticket li { padding: 5px 12px; font-size: 14px; }
    .quiz-discount strong { font-size: 27px; }
    .quiz-cover-footer { padding-top: 8px; }
    .quiz-expert img { width: 36px; height: 36px; }
    .quiz-panel { padding: 22px 16px; }
    .quiz-steps { margin-bottom: 19px; }
    .quiz-hint { margin: 8px 0 15px; font-size: 15px; }
    .quiz-grid { gap: 8px; }
    .quiz-choice { min-height: 70px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 10px; font-size: 15px; }
    .quiz-choice input { right: 10px; top: 11px; }
    .quiz-choice-icon { width: 23px; height: 23px; }
    .quiz-list .quiz-choice, .quiz-other { min-height: 44px; padding: 10px 38px 10px 12px; }
    .quiz-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quiz-contacts { grid-template-columns: 1fr; }
}