.chq { --chq-leather: var(--accent); --chq-emboss: var(--lime); color: var(--ink); }
.chq [hidden], .chq-success[hidden] { display: none; }
.chq-hp { position: absolute; inset-inline-start: -100rem; inline-size: 0.0625rem; block-size: 0.0625rem; opacity: 0; }

.chq-steps { list-style: none; margin: 0 0 var(--sp-8); padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); counter-reset: none; }
.chq-steps__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; font-size: var(--fs-small); color: var(--ink-soft); }
.chq-steps__item::after { content: ""; position: absolute; inset-block-start: 1.125rem; inset-inline-start: calc(50% + 1.5rem); inset-inline-end: calc(-50% + 1.5rem); block-size: 0.125rem; background: var(--line); }
.chq-steps__item:last-child::after { display: none; }
.chq-steps__num { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius-pill); border: 0.125rem solid var(--line); background: var(--surface); font-weight: 700; color: var(--ink-soft); transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast); }
.chq-steps__item.is-current { color: var(--ink); font-weight: 700; }
.chq-steps__item.is-current .chq-steps__num { border-color: var(--accent); color: var(--accent); }
.chq-steps__item.is-done .chq-steps__num { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.chq-steps__item.is-done::after { background: var(--accent); }

.chq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-8); align-items: start; }
.chq-main, .chq-panel { padding: var(--sp-8); border-radius: var(--radius-lg); background: var(--surface); border: 0.0625rem solid var(--line); box-shadow: var(--shadow-sm); }
.chq-panel + .chq-panel { margin-block-start: var(--sp-5); }
.chq-panel__title, .chq-step__title { font-size: var(--fs-h3); margin: 0 0 var(--sp-5); }
.chq-step[hidden] { display: none; }
.chq-step.is-active { animation: chq-in 0.35s ease; }
@keyframes chq-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

.chq-group { margin: 0 0 var(--sp-6); padding: 0; border: 0; min-inline-size: 0; }
.chq-legend, .chq-label { display: block; margin-block-end: var(--sp-2); font-weight: 700; font-size: var(--fs-body); color: var(--ink); }
.chq-req { color: var(--accent); margin-inline-start: 0.2em; }
.chq-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chq-opt { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); min-block-size: 2.75rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-btn); background: var(--bg); cursor: pointer; font-size: var(--fs-small); font-weight: 600; transition: border-color var(--tr-fast), background var(--tr-fast), box-shadow var(--tr-fast); }
.chq-opt:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.chq-opt input { position: absolute; opacity: 0; inline-size: 0.0625rem; block-size: 0.0625rem; }
.chq-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: inset 0 0 0 0.0625rem var(--accent); color: var(--accent); }
.chq-opt:has(input:focus-visible) { outline: 0.1875rem solid var(--accent); outline-offset: 0.125rem; }
.chq-chip { inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--radius-pill); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--surface) 30%, transparent), transparent 60%), var(--chq-chip); box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--bg-deep) 25%, transparent); flex-shrink: 0; }

.chq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-block-end: var(--sp-4); }
.chq-field { display: flex; flex-direction: column; min-inline-size: 0; margin-block-end: var(--sp-4); }
.chq-grid .chq-field { margin-block-end: 0; }
.chq-input { inline-size: 100%; padding: 0.75em 1em; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); transition: border-color var(--tr-fast), box-shadow var(--tr-fast); }
.chq-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--accent) 18%, transparent); }
.chq.is-validated .chq-input:invalid, .chq-input[aria-invalid="true"] { border-color: var(--error); }
.chq-group[data-invalid] .chq-legend { color: var(--error); }
.chq-if { margin-block: 0 var(--sp-6); padding: var(--sp-5); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 4%, var(--bg)); border: 0.0625rem solid var(--line); }
.chq-if .chq-if { margin: 0 0 var(--sp-6); padding: 0; border: 0; background: none; }
.chq-note { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--bg); border-inline-start: 0.1875rem solid var(--lime); font-size: var(--fs-small); color: var(--ink-soft); }

.chq-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-6) var(--sp-4); border: 0.125rem dashed color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--radius-md); background: var(--bg); text-align: center; transition: border-color var(--tr-fast), background var(--tr-fast); }
.chq-drop:hover, .chq-drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.chq-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chq-file:focus-visible + .chq-drop__text { outline: 0.1875rem solid var(--accent); outline-offset: 0.25rem; }
.chq-drop__text { font-weight: 700; color: var(--accent); }
.chq-drop__hint { font-size: var(--fs-small); color: var(--ink-soft); }
.chq-drop__list { font-size: var(--fs-small); color: var(--ink); }

.chq-consent { display: flex; align-items: flex-start; gap: var(--sp-2); margin-block: var(--sp-2) 0; font-size: var(--fs-small); color: var(--ink-soft); }
.chq-consent input { margin-block-start: 0.3rem; accent-color: var(--accent); }
.chq-consent a { color: var(--accent); }

.chq-nav, .chq-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-block-start: var(--sp-8); padding-block-start: var(--sp-5); border-block-start: 0.0625rem solid var(--line); }
.chq-actions { justify-content: flex-start; border: 0; padding: 0; margin-block-start: var(--sp-6); }
.chq-nav .chq-next, .chq-nav .chq-submit { margin-inline-start: auto; }
.chq-back { padding: 0.8em 1.4em; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--ink-soft); font: inherit; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 0.0625rem var(--line); }
.chq-back:hover { color: var(--accent); box-shadow: inset 0 0 0 0.0625rem var(--accent); }
.chq-submit[disabled] { opacity: 0.6; cursor: wait; }
.chq-msg:not(:empty) { margin-block-start: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--error) 10%, var(--surface)); color: var(--error); font-weight: 600; }

.chq-side { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-5)); display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--radius-lg); background: var(--bg-deep); color: var(--ink-invert); }
.chq-preview { display: grid; place-items: center; padding: var(--sp-4) 0; }
.chq-cover { position: relative; inline-size: 10rem; aspect-ratio: 3 / 4; border-radius: 0.25rem var(--radius-sm) var(--radius-sm) 0.25rem; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--surface) 16%, transparent), transparent 55%), repeating-radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--bg-deep) 12%, transparent) 0 0.0625rem, transparent 0.0625rem 0.25rem), var(--chq-leather); box-shadow: var(--shadow-lg), inset -0.5rem 0 0.75rem color-mix(in srgb, var(--bg-deep) 35%, transparent); transition: background var(--tr-med); }
.chq-cover::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 0.9rem; background: var(--chq-leather2, transparent); opacity: 0.95; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.chq-cover__frame { position: absolute; inset: 0.7rem; border: 0.0625rem solid var(--chq-emboss); border-radius: 0.25rem; opacity: 0.85; }
.chq-cover__seal { position: absolute; inset-inline-start: 50%; inset-block-start: 38%; inline-size: 40%; translate: 50% -50%; }
.chq-cover__seal .chotam-logo__wax { fill: color-mix(in srgb, var(--bg-deep) 25%, var(--chq-leather)); }
.chq-cover__seal .chotam-logo__ring { stroke: var(--chq-emboss); }
.chq-cover__seal .chotam-logo__gold { fill: var(--chq-emboss); }
.chq-cover__text { position: absolute; inset-inline: 0.75rem; inset-block-end: 18%; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--chq-emboss); overflow-wrap: anywhere; }
.chq-summary { margin: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-small); }
.chq-summary div { display: flex; justify-content: space-between; gap: var(--sp-3); padding-block-end: var(--sp-2); border-block-end: 0.0625rem solid color-mix(in srgb, var(--ink-invert) 12%, transparent); }
.chq-summary dt { color: color-mix(in srgb, var(--ink-invert) 70%, transparent); }
.chq-summary dd { margin: 0; font-weight: 700; text-align: end; }
.chq-side__time, .chq-side__help { margin: 0; font-size: var(--fs-small); color: color-mix(in srgb, var(--ink-invert) 80%, transparent); }
.chq-side .ym-contact-link { color: var(--accent-ondark); font-weight: 700; }

.chq-success { padding: var(--sp-12) var(--sp-6); border-radius: var(--radius-lg); background: var(--surface); border: 0.0625rem solid var(--line); text-align: center; box-shadow: var(--shadow-md); }
.chq-success:focus { outline: none; }
.chq-success__seal { display: block; inline-size: 5rem; margin: 0 auto var(--sp-5); }
.chq-success h3 { font-size: var(--fs-h2); margin: 0 0 var(--sp-3); }
.chq-success p { margin: 0; color: var(--ink-soft); }

@media (max-width: 64rem) {
  .chq-layout { grid-template-columns: 1fr; }
  .chq-side { position: static; order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--sp-4); }
  .chq-preview { padding: 0; }
  .chq-cover { inline-size: 5.5rem; }
  .chq-cover__text { font-size: 0.625rem; }
  .chq-summary { flex: 1; min-inline-size: 12rem; }
  .chq-side__time, .chq-side__help { flex-basis: 100%; }
}
@media (max-width: 48rem) {
  .chq-main, .chq-panel { padding: var(--sp-5); }
  .chq-grid { grid-template-columns: 1fr; }
  .chq-steps__label { display: none; }
  .chq-steps__item.is-current .chq-steps__label { display: block; }
  .chq-opt { flex: 1 1 calc(50% - var(--sp-2)); justify-content: flex-start; }
  .chq-side .chq-summary { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chq-step.is-active { animation: none; }
  .chq-cover, .chq-opt, .chq-steps__num { transition: none; }
}