.zq-app{
  /* ===== ZMAN DESIGN TOKENS — edit here (Ronen). Per-quiz accent overrides --zq-blue inline. ===== */
  --zq-blue:#0E4F97; --zq-blue-bright:#0C79E4; --zq-red:#EE0000;
  --zq-surface:#F6FBFF; --zq-surface-2:#E2F5FF;
  --zq-ink:#141414; --zq-gray:#808080; --zq-line:#E2E6EA;
  --zq-radius:6px; --zq-pill:20px;
  --zq-maxw:640px;
  direction:rtl; color:var(--zq-ink);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.zq-app[dir="ltr"]{direction:ltr;}
.zq-app *{box-sizing:border-box;}
.zq-app p,.zq-app h1,.zq-app h2,.zq-app ul{margin:0;padding:0;}
.zq-app ul{list-style:none;}
.zq-app button{font-family:inherit;cursor:pointer;}
.zq-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.zq-wrap{max-width:var(--zq-maxw);margin:0 auto;}
.zq-screen{display:none;}
.zq-screen.zq-active{display:block;}

.zq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;
  border-radius:6px;font-size:18px;font-weight:500;padding:14px 28px;line-height:1.2;
  transition:transform .08s ease,background-color .15s ease;}
.zq-btn:active{transform:scale(.985);}
.zq-btn:disabled{opacity:.6;cursor:default;}
.zq-btn:focus-visible{outline:3px solid var(--zq-blue-bright);outline-offset:2px;}
.zq-btn-primary{background:var(--zq-red);color:#fff;}
.zq-btn-primary:hover{background:#cc0000;}
.zq-btn-ghost{background:#fff;color:var(--zq-blue);border:1px solid var(--zq-line);}
.zq-btn-ghost:hover{background:var(--zq-surface);}
.zq-btn-block{display:flex;width:100%;}

/* ===== opening box (Ronen) — surface is per-quiz customizable via --zq-intro-bg ===== */
.zq-introbox{
  --zq-intro-bg:var(--zq-blue);
  background:var(--zq-intro-bg);
  border-radius:6px;margin:28px 0 0;padding:34px;color:var(--zq-intro-fg,#fff);
  position:relative;overflow:hidden;text-align:center;
}
.zq-introbox--image::before{content:"";position:absolute;inset:0;background:rgba(12,32,68,.55);}
.zq-introbox > *{position:relative;z-index:1;}
.zq-hero{display:flex;flex-direction:column;align-items:center;gap:20px;align-self:stretch;margin:0 0 24px;}
.zq-badge{display:inline-block;background:#fff;color:var(--zq-blue);font-weight:600;font-size:18px;line-height:1.67;
  padding:0 20px;margin:0;}
.zq-eyebrow{display:block;font-size:18px;font-weight:500;line-height:1.33;color:var(--zq-intro-fg,#fff);margin:0;}
.zq-hero h1{font-size:60px;line-height:1;font-weight:500;margin:0;color:var(--zq-intro-fg,#fff);}
.zq-hero p{font-size:18px;font-weight:400;line-height:1.33;color:var(--zq-intro-fg,#fff);max-width:30em;margin:0;}
.zq-intro-panel{background:var(--zq-panel-bg,#fff);border-radius:6px;padding:6px 22px 22px;text-align:start;}
.zq-app ul.zq-how{margin:0 0 5px;}
.zq-how li{display:flex;gap:10px;align-items:flex-start;padding:15px 2px;border-bottom:1px solid var(--zq-line);font-size:18px;font-weight:400;line-height:1.67;color:var(--zq-box-color,var(--zq-blue));}
.zq-how li:last-child{border-bottom:none;}
.zq-n{flex:0 0 auto;color:inherit;font-weight:inherit;font-size:inherit;}
.zq-best{font-size:15px;color:rgba(255,255,255,.85);margin:18px 0 0;}
.zq-best b{color:#fff;font-weight:700;}
.zq-introbox .zq-toast{color:var(--zq-intro-fg,#fff);}
.zq-start{background:var(--zq-btn-bg,var(--zq-red));color:var(--zq-btn-fg,#fff);font-size:18px;font-weight:500;line-height:1.11;}
.zq-start:hover{background:var(--zq-btn-bg,var(--zq-red));filter:brightness(.94);}

.zq-gamebar{padding:24px 0 0;}
.zq-progress-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--zq-gray);margin-bottom:10px;}
.zq-progress-row .zq-score{color:var(--zq-blue);font-weight:500;}
.zq-track{height:4px;background:var(--zq-line);border-radius:4px;overflow:hidden;}
.zq-track > i{display:block;height:100%;background:var(--zq-blue);width:0;transition:width .35s ease;}
.zq-diff{display:flex;gap:8px;align-items:center;margin:18px 0 6px;font-size:13px;color:var(--zq-gray);}
.zq-diff-dots{display:inline-flex;gap:4px;}
.zq-dot{width:8px;height:8px;border-radius:50%;background:var(--zq-line);}
.zq-dot.zq-on{background:var(--zq-blue-bright);}
.zq-question{font-size:26px;font-weight:500;line-height:1.35;margin:6px 0 30px;}
.zq-media{margin:8px 0 20px;}
.zq-media[hidden]{display:none;}
.zq-qmedia-img{display:block;width:100%;height:auto;border-radius:var(--zq-radius);}
.zq-credit{font-size:12.5px;color:var(--zq-gray);line-height:1.45;margin:6px 2px 0;}
.zq-credit[hidden]{display:none;}
.zq-app[dir="rtl"] .zq-credit{text-align:left;}
.zq-app[dir="ltr"] .zq-credit{text-align:right;}

.zq-readout{text-align:center;margin:0 0 4px;}
.zq-val{font-size:40px;font-weight:700;color:var(--zq-blue-bright);}
.zq-hint{text-align:center;font-size:14px;color:var(--zq-gray);margin:0 0 18px;}
.zq-app input[type=range]{width:100%;margin:6px 0 26px;accent-color:var(--zq-blue-bright);height:24px;}
.zq-app input[type=range]:focus-visible{outline:3px solid var(--zq-blue-bright);outline-offset:4px;border-radius:4px;}

.zq-reveal{background:var(--zq-surface);border-radius:var(--zq-radius);padding:22px 22px 20px;margin-top:8px;}
.zq-reveal .zq-answer-label{font-size:15px;color:var(--zq-gray);margin:0 0 2px;}
.zq-reveal .zq-answer-val{font-size:38px;font-weight:700;color:var(--zq-blue);line-height:1.1;}
.zq-reveal .zq-compare{font-size:15px;color:var(--zq-gray);margin:6px 0 16px;}
.zq-meter{height:10px;background:#fff;border-radius:6px;overflow:hidden;border:1px solid var(--zq-line);}
.zq-meter > i{display:block;height:100%;width:0;background:var(--zq-blue-bright);transition:width .6s ease;}
.zq-verdict{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 0;}
.zq-verdict .zq-word{font-size:17px;font-weight:500;}
.zq-verdict .zq-pts{font-size:20px;font-weight:700;color:var(--zq-red);}
.zq-reveal .zq-ctx{font-size:15.5px;line-height:1.65;color:var(--zq-ink);margin:14px 0 0;padding-top:14px;border-top:1px solid var(--zq-line);}
.zq-action-area{padding:24px 0 56px;}

.zq-result-head{background:var(--zq-blue);color:#fff;text-align:center;padding:44px 0 38px;border-radius:var(--zq-radius);margin:28px 0 0;}
.zq-result-head .zq-label{font-size:15px;color:rgba(255,255,255,.8);margin:0 0 6px;}
.zq-result-head .zq-total{font-size:64px;font-weight:700;line-height:1;}
.zq-result-head .zq-total small{font-size:22px;font-weight:400;color:rgba(255,255,255,.7);}
.zq-result-head .zq-tier{font-size:22px;font-weight:500;margin:14px 0 0;}
.zq-recap-wrap{padding:32px 0 8px;}
.zq-recap-wrap h2{font-size:18px;font-weight:500;margin:0 0 14px;}
.zq-recap-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--zq-line);}
.zq-recap-row:last-child{border-bottom:none;}
.zq-recap-row .zq-rq{font-size:15.5px;flex:1;}
.zq-recap-row .zq-nums{font-size:14px;color:var(--zq-gray);white-space:nowrap;text-align:end;}
.zq-recap-row .zq-nums b{color:var(--zq-blue);font-weight:500;}
.zq-recap-row .zq-rp{font-size:15px;font-weight:500;color:var(--zq-red);flex:0 0 auto;min-width:42px;text-align:end;}
.zq-result-actions{display:flex;gap:12px;padding:18px 0 60px;flex-wrap:wrap;}
.zq-result-actions .zq-btn{flex:1;min-width:160px;}
.zq-toast{font-size:14px;color:var(--zq-blue);margin:10px 0 0;min-height:18px;text-align:center;}

@media (max-width:520px){
  .zq-introbox{display:flex;flex-direction:column;align-items:center;gap:20px;align-self:stretch;padding:15px;}
  .zq-hero{margin:0;}
  .zq-intro-panel{align-self:stretch;}
  .zq-hero h1{font-size:40px;}
  .zq-hero p{font-size:16px;line-height:1.25;}
  .zq-how li{font-size:16px;line-height:1.5;padding:10px 0;}
  .zq-val{font-size:34px;}
}
@media (prefers-reduced-motion: reduce){ .zq-app *{transition:none !important;} }

/* ===== STEP 2: lightbox takeover + play screens ===== */
.zq-lightbox{position:fixed;inset:0;z-index:2147483646;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px;}
.zq-lightbox[hidden]{display:none;}
.zq-backdrop{position:absolute;inset:0;background:rgba(10,20,40,.62);}
.zq-stack{position:relative;z-index:2;width:100%;max-width:640px;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
/* X sits on the dim backdrop, directly above the card, at its inline-start corner (right in RTL, left in LTR) */
.zq-close{flex:0 0 auto;align-self:flex-start;margin-bottom:6px;width:52px;height:52px;padding:0;border:none;background:transparent;
  color:#fff;font-size:48px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.zq-close:hover{opacity:.82;}
.zq-close:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px;}
.zq-dialog{position:relative;background:#fff;width:100%;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:6px;box-shadow:0 16px 50px rgba(0,0,0,.45);}
@media (min-width:700px){
  .zq-lightbox{padding:20px;}
}

/* screens fill the dialog and stack head / body / foot */
.zq-dialog .zq-screen{display:none;}
.zq-dialog .zq-screen.zq-active{display:flex;flex-direction:column;height:100%;min-height:0;}

/* pinned header */
.zq-dialog-head{flex:0 0 auto;padding:18px 22px 12px;}
.zq-dialog-head .zq-progress-row{padding-inline-end:40px;margin-bottom:10px;}

/* body: image shrinks (covered from the bottom) as content below grows */
.zq-dialog-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden auto;}
.zq-qmedia{flex:0 1 auto;min-height:0;margin:14px 22px 6px;position:relative;overflow:hidden;border-radius:10px;aspect-ratio:1024/640;}
.zq-qmedia[hidden]{display:none;}
.zq-qmedia-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.zq-qmedia .zq-credit{position:absolute;inset-inline-end:0;bottom:0;margin:0;padding:4px 10px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;text-align:end;}
.zq-qcontent{flex:0 0 auto;padding:16px 22px 6px;background:#fff;}

/* pinned footer (CTA always here) */
.zq-dialog-foot{flex:0 0 auto;padding:14px 22px 18px;background:#fff;}

/* difficulty stars (replaces dots) */
.zq-diff{margin:0 0 10px;}
.zq-diff-stars{display:inline-flex;gap:3px;}
.zq-star{color:#CBD2DA;font-size:15px;line-height:1;}
.zq-star.zq-on{color:var(--zq-red);}

/* tighten play content for the fixed-height dialog */
.zq-question{font-size:24px;line-height:1.17;margin:0 0 14px;}
.zq-app input[type=range]{margin:6px 0 4px;}
.zq-hint{margin:0 0 12px;}

/* result inside the dialog */
.zq-result-scroll{flex:1 1 auto;min-height:0;overflow:auto;}
.zq-result-head{margin:0;border-radius:0;padding:36px 24px 30px;}
.zq-recap-wrap{padding:24px 22px 16px;}
.zq-result-actions{padding:0;}
.zq-result-actions .zq-btn{flex:1;min-width:0;}