/* ==========================================================================
   Quizlar — quiz o'yini (quizs/quiz.html)
   OliyFizika 2.0 tokenlari (yorug' / qorong'i avtomatik). Prefiks: qz-
   ========================================================================== */

.qz { position: relative; max-width: 860px; }
.qz > [data-view] { display: flex; flex-direction: column; gap: 16px; }

/* ---- Suv belgisi: sekin harakatlanuvchi, ko'zga tashlanmaydigan «oliyfizika.uz» ---------------- */
.qz-wm {
  --qz-wm-tile: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Ctext x='24' y='84' font-family='Inter,Arial,sans-serif' font-size='25' font-weight='700' letter-spacing='.5' fill='black'%3Eoliyfizika.uz%3C/text%3E%3C/svg%3E");
  position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; user-select: none;
}
.qz-wm::before {
  content: ""; position: absolute; inset: -45%; transform: rotate(-20deg);
  background: var(--of-primary); opacity: .05;
  -webkit-mask-image: var(--qz-wm-tile); mask-image: var(--qz-wm-tile);
  -webkit-mask-size: 300px 150px; mask-size: 300px 150px;
  animation: qz-wm-drift 90s linear infinite;
}
:root[data-theme="dark"] .qz-wm::before { opacity: .07; background: var(--of-text); }
@keyframes qz-wm-drift {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to   { -webkit-mask-position: 300px 150px; mask-position: 300px 150px; }
}
@media print { .qz-wm { display: none; } }

/* ---- Yo'l-yo'riq --------------------------------------------------------------------------------- */
.qz-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--of-text-sm); color: var(--of-text-3); }
.qz-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--of-border-strong); }
.qz-crumbs a { color: var(--of-text-2); }
.qz-crumbs [aria-current] { color: var(--of-text); font-weight: 600; }

/* ---- Tepa panel ---------------------------------------------------------------------------------- */
.qz-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; }
.qz-bar__title { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.qz-bar__title small { color: var(--of-primary-text); font: 700 .7rem/1.2 var(--of-font-sans); letter-spacing: .06em; text-transform: uppercase; }
.qz-bar__title b { font: 750 var(--of-text-md)/1.3 var(--of-font-display); overflow-wrap: anywhere; }
.qz-bar__count { font: 700 var(--of-text-sm)/1 var(--of-font-sans); color: var(--of-text-2); }
.qz-bar .of-progress { flex: 1 1 140px; min-width: 120px; max-width: 260px; }

/* ---- Savol kartasi ------------------------------------------------------------------------------- */
.qz-q { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; animation: of-slide-up var(--of-dur-slow) var(--of-ease-out); }
.qz-q:focus { outline: none; }
.qz-q__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qz-q__num { font: 800 var(--of-text-lg)/1 var(--of-font-display); color: var(--of-primary-text); }
.qz-q__body { font-size: var(--of-text-lg); font-weight: 600; line-height: 1.6; color: var(--of-text); overflow-wrap: anywhere; }
.qz-q__body .katex { font-size: 1.05em; }

/* Timer */
.qz-timer {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 40px; padding: 0 12px 4px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--of-primary) 30%, var(--of-border));
  border-radius: var(--of-radius-md);
  background: var(--of-primary-soft); color: var(--of-primary-text);
  font: 600 var(--of-text-sm)/1 var(--of-font-sans);
  transition: background var(--of-dur-base), color var(--of-dur-base), border-color var(--of-dur-base);
}
.qz-timer svg { width: 18px; height: 18px; }
.qz-timer b { min-width: 2ch; font: 800 var(--of-text-lg)/1 var(--of-font-display); text-align: right; }
.qz-timer__bar { position: absolute; inset: auto 0 0 0; height: 3px; background: color-mix(in srgb, currentColor 15%, transparent); }
.qz-timer__bar span { display: block; height: 100%; width: 100%; background: currentColor; transition: width 200ms linear; }
.qz-timer[data-warn="true"] { background: var(--of-danger-soft); border-color: var(--of-danger); color: var(--of-danger-text); }
.qz-timer[data-warn="true"]:not([data-stopped]) b { animation: qz-pulse 1s ease-in-out infinite; }
.qz-timer[data-stopped] { opacity: .65; }
@keyframes qz-pulse { 50% { opacity: .45; } }

/* Variantlar */
.qz-opts { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qz-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--of-border); border-radius: var(--of-radius-md);
  background: var(--of-surface); color: var(--of-text);
  font: inherit; line-height: 1.55; text-align: left; cursor: pointer;
  transition: border-color var(--of-dur-fast), background-color var(--of-dur-fast), box-shadow var(--of-dur-fast), transform var(--of-dur-fast);
}
.qz-opt:hover:not(:disabled) { border-color: var(--of-primary-soft-2); background: var(--of-primary-soft); }
.qz-opt:active:not(:disabled) { transform: translateY(1px); }
.qz-opt:disabled { cursor: default; }
.qz-opt:disabled:not([data-state]) { opacity: .6; }
.qz-opt__key {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--of-surface-sunken); color: var(--of-text-2); font: 750 var(--of-text-sm)/1 var(--of-font-display);
}
.qz-opt__content { flex: 1; min-width: 0; padding-top: 3px; overflow-wrap: anywhere; }
.qz-opt[data-state="correct"] { border-color: var(--of-success); background: var(--of-success-soft); }
.qz-opt[data-state="correct"] .qz-opt__key { background: var(--of-success-solid); color: #fff; }
.qz-opt[data-state="wrong"] { border-color: var(--of-danger); background: var(--of-danger-soft); animation: qz-shake 320ms var(--of-ease-out); }
.qz-opt[data-state="wrong"] .qz-opt__key { background: var(--of-danger); color: #fff; }
@keyframes qz-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.qz-feedback { display: flex; align-items: center; gap: 8px; min-height: 1.5em; font-weight: 650; }
.qz-feedback:empty { display: none; }
.qz-feedback svg { width: 20px; height: 20px; flex: none; }
.qz-feedback[data-ok="true"] { color: var(--of-success-text); }
.qz-feedback[data-ok="false"] { color: var(--of-danger-text); }

.qz-q__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qz-q__nav .of-btn { margin-left: auto; }
.qz-hint { font-size: var(--of-text-xs); color: var(--of-text-3); }
.qz-hint kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 5px; border: 1px solid var(--of-border); border-bottom-width: 2px;
  border-radius: 5px; background: var(--of-surface-2); font: 600 .7rem/1.4 var(--of-font-sans); text-align: center;
}

/* ---- Natija -------------------------------------------------------------------------------------- */
.qz-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; }
.qz-ring {
  --p: 0; --c: var(--of-primary);
  display: grid; place-items: center; width: 136px; height: 136px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--of-surface-sunken) 0);
}
.qz-ring[data-level="high"] { --c: var(--of-success); }
.qz-ring[data-level="low"] { --c: var(--of-danger); }
.qz-ring__inner { display: grid; place-items: center; align-content: center; gap: 4px; width: 104px; height: 104px; border-radius: 50%; background: var(--of-surface); text-align: center; }
.qz-ring__inner b { font: 800 1.7rem/1 var(--of-font-display); }
.qz-ring__inner span { font-size: var(--of-text-xs); color: var(--of-text-3); }
.qz-result__text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qz-result__text h1 { font-size: var(--of-text-2xl); }
.qz-result__text h1:focus { outline: none; }
.qz-result__text p { color: var(--of-text-2); line-height: 1.6; }
.qz-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qz-count { padding: 10px 12px; border: 1px solid var(--of-border); border-radius: var(--of-radius-md); background: var(--of-surface-2); }
.qz-count span { display: block; font-size: var(--of-text-xs); font-weight: 650; color: var(--of-text-3); }
.qz-count b { font: 800 var(--of-text-xl)/1.2 var(--of-font-display); }
.qz-count--ok b { color: var(--of-success-text); }
.qz-count--bad b { color: var(--of-danger-text); }
.qz-count--skip b { color: var(--of-warning-text); }
.qz-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Tahlil */
.qz-review-wrap { display: flex; flex-direction: column; gap: 12px; }
.qz-review-wrap h2 { font-size: var(--of-text-lg); }
.qz-review { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qz-rev { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-left: 4px solid var(--of-border-strong); }
.qz-rev[data-status="correct"] { border-left-color: var(--of-success); }
.qz-rev[data-status="wrong"] { border-left-color: var(--of-danger); }
.qz-rev[data-status="timeout"] { border-left-color: var(--of-warning); }
.qz-rev .qz-q__body { font-size: var(--of-text-md); }
.qz-rev__head { display: flex; align-items: center; gap: 10px; }
.qz-rev__verdict { display: inline-flex; align-items: center; gap: 6px; font-size: var(--of-text-sm); font-weight: 700; }
.qz-rev__verdict svg { width: 18px; height: 18px; }
.qz-rev[data-status="correct"] .qz-rev__verdict { color: var(--of-success-text); }
.qz-rev[data-status="wrong"] .qz-rev__verdict { color: var(--of-danger-text); }
.qz-rev[data-status="timeout"] .qz-rev__verdict { color: var(--of-warning-text); }
.qz-rev__ans { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--of-text-sm); }
.qz-rev__ans dt { color: var(--of-text-3); font-weight: 600; }
.qz-rev__ans dd { margin: 0; overflow-wrap: anywhere; }
.qz-rev__ans .is-correct { color: var(--of-success-text); font-weight: 600; }
.qz-rev__ans .is-wrong { color: var(--of-danger-text); }

/* ---- Holat (yuklanish / xato) -------------------------------------------------------------------- */
.qz-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--of-text-2); }
.qz-state svg { width: 40px; height: 40px; color: var(--of-text-3); }
.qz-state h2 { font-size: var(--of-text-lg); }
.qz-state .of-btn svg { width: 18px; height: 18px; color: currentColor; }
.qz-skeleton { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }

/* ---- Moslashuvchanlik ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .qz-bar { gap: 10px; padding: 10px 12px; }
  .qz-bar .of-progress { flex-basis: 100%; max-width: none; order: 5; }
  .qz-q { gap: 14px; padding: 16px; }
  .qz-q__body { font-size: var(--of-text-md); }
  .qz-opt { padding: 11px 12px; }
  .qz-hint { display: none; }
  .qz-q__nav .of-btn { width: 100%; }
  .qz-result { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 18px; text-align: center; }
  .qz-actions { justify-content: center; }
  .qz-actions .of-btn { flex: 1 1 100%; }
  .qz-count { padding: 8px; }
  .qz-rev { padding: 14px; }
  .qz-rev__ans { grid-template-columns: minmax(0, 1fr); }
  .qz-rev__ans dd + dt { margin-top: 4px; }
}
@media (hover: none) { .qz-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .qz-wm::before { animation: none; } }