/* Quiz — built on the Cadi app design system (shadcn base). Scoped to .qz so
   nothing leaks into the rest of the site. */
body { background: #eef1fb; }
.qz {
  --qz-bg: #eef1fb; --qz-card: #ffffff; --qz-soft: #f5f7ff; --qz-border: #e2e8f6; --qz-border-strong: #d5def3;
  --qz-text: #0a1030; --qz-muted: #5a6690; --qz-primary: #3a55e8; --qz-primary-hover: #334bcc; --qz-primary-soft: #ebeefd;
  --qz-success: #0d855d; --qz-danger: #ba344d; --qz-ring: #3a55e8;
  --qz-r-sm: 8px; --qz-r-md: 10px; --qz-r-lg: 14px;
  --qz-shadow: 0 1px 2px rgba(10,16,48,.05), 0 4px 14px rgba(10,16,48,.06);
  font-family: var(--font); color: var(--qz-text); min-height: calc(100svh - 68px);
}
.qz *, .qz *::before, .qz *::after { box-sizing: border-box; }
.qz .wrap { max-width: 680px; margin: 0 auto; padding: 28px 16px 56px; }
@media (min-width: 900px) { .qz .wrap { padding: 56px 20px 88px; } }
.qz h1, .qz h2, .qz h3, .qz p { margin: 0; }
.qz [data-focus]:focus { outline: none; }
.qz .overline { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--qz-muted); }
.qz .h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin-top: 12px; }
.qz .body { font-size: 16px; line-height: 1.6; color: var(--qz-text); }
.qz .muted { color: var(--qz-muted); }
.qz .rv { margin-left: 6px; font-size: 12px; font-weight: 700; color: #8e5c06; background: #f6f0e6; border-radius: 4px; padding: 0 .3em; }

/* entrance */
@keyframes qz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qz .step { animation: qz-in .22s ease-out both; }
@media (prefers-reduced-motion: reduce) { .qz .step, .qz * { animation: none !important; transition: none !important; } }

/* buttons */
.qz .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--qz-r-md); background: var(--qz-primary); color: #fff; font: 700 16px var(--font); cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; }
.qz .btn-primary:hover { background: var(--qz-primary-hover); }
.qz .btn-primary:active { transform: scale(.99); }
.qz .btn-primary:disabled { opacity: .6; cursor: default; }
.qz .btn-full { width: 100%; }
.qz .link { background: none; border: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; font: 700 14px var(--font); color: var(--qz-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qz :is(button, a, input):focus-visible { outline: 3px solid var(--qz-ring); outline-offset: 2px; }

/* landing */
.qz .resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 20px; padding: 12px 16px; border-radius: var(--qz-r-md); background: var(--qz-primary-soft); font-weight: 700; font-size: 15px; }
.qz .models { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.qz .model { background: var(--qz-card); border: 1px solid var(--qz-border); border-radius: var(--qz-r-lg); overflow: hidden; box-shadow: var(--qz-shadow); }
.qz .model .photo { aspect-ratio: 4 / 3; border-radius: 0; }
.qz .model p { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.qz .model i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.qz .start-bar { margin-top: 24px; }
.qz .start-bar .note { font-size: 14px; font-weight: 600; color: var(--qz-muted); margin-bottom: 12px; }
@media (max-width: 720px) { .qz .start-bar { position: sticky; bottom: 0; margin: 24px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--qz-bg); box-shadow: 0 -10px 18px -14px rgba(10,16,48,.3); } }

/* questions */
.qz .qtop { display: flex; align-items: center; gap: 14px; }
.qz .back { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--qz-border-strong); background: var(--qz-card); color: var(--qz-text); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.qz .back svg { width: 20px; height: 20px; }
.qz .bar { flex: 1; height: 8px; border-radius: 99px; background: var(--qz-border); overflow: hidden; }
.qz .bar i { display: block; height: 100%; border-radius: 99px; background: var(--qz-primary); transition: width .3s ease; }
.qz .count { font-size: 13px; font-weight: 700; color: var(--qz-muted); white-space: nowrap; }
.qz .qtext { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-top: 28px; }
.qz .opts { display: grid; gap: 10px; margin-top: 24px; }
.qz .opt { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 16px; border-radius: var(--qz-r-lg); border: 1px solid var(--qz-border-strong); background: var(--qz-card); color: var(--qz-text); font: 600 16px/1.4 var(--font); text-align: left; cursor: pointer; box-shadow: var(--qz-shadow); transition: border-color .15s, background .15s, transform .1s; }
.qz .opt::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 2px solid #8792b7; background: #fff; transition: border-color .15s, box-shadow .15s; }
.qz .opt:hover { border-color: var(--qz-primary); }
.qz .opt:active { transform: scale(.995); }
.qz .opt[aria-pressed="true"] { border-color: var(--qz-primary); background: var(--qz-primary-soft); }
.qz .opt[aria-pressed="true"]::before { border-color: var(--qz-primary); box-shadow: inset 0 0 0 4px #fff; background: var(--qz-primary); }
.qz .hint { margin-top: 20px; font-size: 13px; color: var(--qz-muted); text-align: center; }

/* building beat */
.qz .beat { display: grid; place-items: center; text-align: center; gap: 18px; min-height: 50svh; padding: 24px; }
.qz .beat h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.qz .beat .bar { width: min(280px, 70vw); flex: none; }
.qz .beat .bar i { width: 100%; transform-origin: left; animation: qz-fill .9s ease-out both; }
@keyframes qz-fill { from { transform: scaleX(.05); } to { transform: scaleX(1); } }

/* result */
.qz .rhead { background: var(--qz-card); border: 1px solid var(--qz-border); border-top-width: 6px; border-radius: var(--qz-r-lg); box-shadow: var(--qz-shadow); overflow: hidden; }
.qz .rhead .in { padding: 22px 20px 24px; }
.qz .rhead .toprow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qz .rname { font-size: clamp(36px, 7vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-top: 6px; }
.qz .rhead .photo { height: 200px; margin-top: 18px; border-radius: var(--qz-r-md); }
@media (min-width: 900px) { .qz .rhead .photo { height: 280px; } }
.qz .rdef { font-size: 18px; line-height: 1.55; margin-top: 18px; font-weight: 500; }
.qz .drift { margin-top: 16px; padding: 12px 14px; border-radius: var(--qz-r-sm); background: var(--qz-soft); font-size: 15px; line-height: 1.5; font-weight: 600; }
.qz .rsec { margin-top: 28px; }
.qz .rsec > h2 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; margin-top: 6px; }
.qz .rsec > .body { margin-top: 10px; }
.qz .tile { background: var(--qz-card); border: 1px solid var(--qz-border); border-radius: var(--qz-r-lg); box-shadow: var(--qz-shadow); padding: 18px 20px; }
.qz .tile .big { display: block; font-size: clamp(21px, 4vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 6px; color: var(--qz-success); }
.qz .tile .sub { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--qz-muted); }
.qz .moves { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; counter-reset: mv; }
.qz .move { counter-increment: mv; display: grid; grid-template-columns: 32px 1fr; gap: 4px 14px; background: var(--qz-card); border: 1px solid var(--qz-border); border-radius: var(--qz-r-lg); box-shadow: var(--qz-shadow); padding: 16px; }
.qz .move::before { content: counter(mv); grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--qz-primary); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.qz .move h3 { font-size: 17px; font-weight: 800; line-height: 1.3; }
.qz .move p { font-size: 15px; line-height: 1.6; color: var(--qz-muted); }
.qz .subhead { margin-top: 22px; font-size: 15px; font-weight: 800; }
.qz .said { margin-top: 14px; padding: 12px 14px; border-radius: var(--qz-r-sm); background: var(--qz-primary-soft); font-size: 15px; line-height: 1.55; }
.qz .clash { margin-top: 14px; padding: 14px 16px; border-radius: var(--qz-r-md); border: 1px solid var(--qz-border-strong); background: var(--qz-card); font-size: 15px; line-height: 1.6; }
.qz .cadi { background: var(--qz-primary-soft); border-radius: var(--qz-r-lg); padding: 18px 20px; }
.qz .cadi p.body { margin-top: 8px; }
.qz .doors { background: var(--paper); border-radius: var(--r-lg); padding: 24px 20px; scroll-margin-top: 88px; }
@media (min-width: 900px) { .qz .doors { padding: 32px; } }
.qz .doors h2 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--navy); }
.qz .doors .body { color: var(--ink-body); }
.qz .doors label { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin: 20px 0 8px; }
.qz .doors input { width: 100%; min-height: 56px; padding: 0 20px; border-radius: var(--r-pill); border: 2px solid var(--line); background: var(--white); font: 600 17px var(--font); color: var(--navy); }
.qz .doors input:focus { outline: none; border-color: var(--blue); }
.qz .doors .row { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.qz .doors .btn { width: 100%; }
.qz .doors [data-msg] { min-height: 22px; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--green-deep); }
.qz .doors [data-msg].err { color: var(--pink-deep); }
.qz .doors .fine { margin-top: 6px; font-size: 13px; color: var(--ink-muted); }
.qz .reads { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.qz .reads a { display: grid; gap: 8px; padding: 14px 16px; text-decoration: none; color: var(--qz-text); background: var(--qz-card); border: 1px solid var(--qz-border); border-radius: var(--qz-r-lg); }
.qz .reads .t { font-size: 17px; font-weight: 800; line-height: 1.35; }
.qz .reads a:hover .t { text-decoration: underline; text-underline-offset: 4px; }
.qz .reads .pill { justify-self: start; }
.qz .connect-door { display: inline-flex; margin-top: 12px; min-height: 44px; align-items: center; font-weight: 800; color: #b8471a; }

.qz .move.fix { counter-increment: none; }
.qz .move.fix::before { content: "→"; background: var(--qz-success); }