/* === Kalite Test v2.1.0 (Mobile-friendly, theme-aware) === */
:root{
  --gq-bg: var(--mow-bbc, #ffffff);
  --gq-fg: var(--mow-hc, #111827);
  --gq-border: var(--mow-border-color, #e5e7eb);
  --gq-muted: var(--mow-bc, #6b7280);
  --gq-accent: var(--mow-mc1, #0f766e);
  --gq-contrast: var(--mow-contrast-text, #ffffff);
  --gq-radius: var(--radius, 12px);
  --gq-space: var(--space, 16px);
  --gq-space-lg: var(--space-lg, 28px);
  --gq-head-ff: var(--hff, 'Heebo', system-ui, sans-serif);
  --gq-body-ff: var(--bff, 'Work Sans', system-ui, sans-serif);
}
.gq-wrap{
  background: var(--gq-bg);
  color: var(--gq-fg);
  border: 1px solid var(--gq-border);
  border-radius: var(--gq-radius);
  box-shadow: var(--mow-box-shadow, 0 1px 3px rgba(0,0,0,.15));
  max-width: 820px; margin: 1rem auto; padding: var(--gq-space-lg);
  font-family: var(--gq-body-ff);
  scroll-margin-top: var(--wp-admin--admin-bar--height, 32px);
}
.gq-wrap *,
.gq-wrap *::before,
.gq-wrap *::after{box-sizing:border-box}
.gq-wrap button,
.gq-wrap a{letter-spacing:0; text-transform:none}
.gq-wrap[data-gq-theme="light"]{
  --gq-bg:#ffffff;
  --gq-fg:#111827;
  --gq-border:#d9e2df;
  --gq-muted:#5f6f6a;
  --gq-accent:#0f766e;
  --gq-contrast:#ffffff;
}
.gq-wrap[data-gq-theme="dark"]{
  --gq-bg:#141817;
  --gq-fg:#edf7f4;
  --gq-border:#2f403c;
  --gq-muted:#a9bbb5;
  --gq-accent:#2dd4bf;
  --gq-contrast:#061412;
  box-shadow:none;
}
.gq-head{position:relative; display:flex; flex-direction:column; gap:.25rem; padding-right:92px; margin-bottom:.75rem}
.gq-back,
.gq-back:visited{
  display:inline-flex; align-items:center; justify-content:center; align-self:flex-start;
  min-height:34px; padding:.38rem .68rem; border-radius:10px;
  border:1px solid var(--gq-border); background: color-mix(in srgb, var(--gq-fg) 5%, transparent);
  color:var(--gq-fg); font-size:14px; font-weight:800; line-height:1; text-decoration:none;
  box-shadow:none; text-transform:none; letter-spacing:0;
}
.gq-back:hover{background: color-mix(in srgb, var(--gq-fg) 10%, transparent); text-decoration:none}
.gq-title{font-family:var(--gq-head-ff); font-weight:800; font-size: clamp(22px, 2.8vw, 28px)}
.gq-sub{color:var(--gq-muted); font-size: clamp(14px, 2.1vw, 16px)}
.gq-intro{text-align:center; color: color-mix(in srgb, var(--gq-fg) 92%, transparent)}
.gq-bank{display:inline-flex; align-items:center; justify-content:center; min-height:32px; margin:.25rem 0 1rem; padding:.35rem .65rem; border:1px solid var(--gq-border); border-radius:999px; color:var(--gq-muted); font-size:14px; background: color-mix(in srgb, var(--gq-accent) 8%, transparent)}
.gq-btn{
  cursor:pointer; padding:.7rem 1.1rem; border-radius: var(--gq-radius);
  background: var(--gq-accent); color: var(--gq-contrast);
  border:1px solid color-mix(in srgb, var(--gq-accent) 70%, #000 30%);
  font-weight:700; transition: background .2s ease, transform .08s ease;
  font-size: clamp(16px, 2.6vw, 18px);
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.gq-btn:hover{ background: color-mix(in srgb, var(--gq-accent) 88%, #000 12%); transform: translateY(-1px); }

.hidden{display:none}
.gq-quiz .gq-progress{ display:flex; align-items:center; gap:.45rem; color:var(--gq-muted); font-size: .95rem; margin-bottom:.35rem }
.gq-ladder{ min-height:1.35rem; color:var(--gq-accent); font-weight:800 }
.gq-meta{ display:inline-flex; max-width:100%; margin-bottom:.55rem; padding:.28rem .55rem; border-radius:999px; border:1px solid var(--gq-border); color: color-mix(in srgb, var(--gq-fg) 86%, transparent); background: color-mix(in srgb, var(--gq-fg) 5%, transparent); font-size:13px; line-height:1.35; overflow-wrap:anywhere }
.gq-q{ font-size: clamp(18px, 3.2vw, 22px); font-weight: 800; margin:.25rem 0 .6rem; line-height:1.35 }

/* Choices (mobile-first) */
.gq-choices{ display:grid; grid-template-columns:1fr; gap: var(--gq-space) }
@media (min-width: 840px){ .gq-choices{ grid-template-columns:1fr 1fr } }
.gq-choices .gq-opt{
  appearance:none; -webkit-appearance:none;
  text-align:left; border:1px solid var(--gq-border);
  border-radius: calc(var(--gq-radius) - 2px);
  background: color-mix(in srgb, var(--gq-fg) 6%, transparent);
  color: var(--gq-fg);
  padding: 16px 16px; min-height: 52px;
  font-size: clamp(17px, 3vw, 20px);
  line-height: 1.5; word-break: normal; overflow-wrap: anywhere;
  font-weight:600; letter-spacing:0; text-transform:none !important;
  cursor:pointer; transition: background .18s ease, transform .06s ease;
}
.gq-choices .gq-opt:hover{ background: color-mix(in srgb, var(--gq-fg) 12%, transparent); transform: translateY(-1px) }
.gq-choices .gq-opt:focus-visible{ outline:none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gq-accent, #4f46e5) 55%, transparent) }

/* Correct / Wrong (explicit colors for clarity) */
.gq-choices .gq-opt.correct{ background: color-mix(in srgb, #16a34a 18%, transparent); border-color:#16a34a; color:#0b1f0b; box-shadow: inset 0 0 0 2px rgba(22,163,74,.22) }
.gq-choices .gq-opt.wrong{ background: color-mix(in srgb, #e11d48 16%, transparent); border-color:#e11d48; color:#3d0a14; box-shadow: inset 0 0 0 2px rgba(225,29,72,.2) }

/* Feedback + explanation */
.gq-feedback{ min-height:1.6rem; margin:.35rem 0 .6rem; font-weight:700 }
.gq-feedback.ok{ color:#16a34a }
.gq-feedback.err{ color:#e11d48 }
.gq-explain{ margin-top:.5rem; padding:.6rem .75rem; border:1px dashed var(--gq-border); border-radius: calc(var(--gq-radius) - 2px); background: color-mix(in srgb, var(--gq-fg) 4%, transparent); color: color-mix(in srgb, var(--gq-fg) 90%, transparent); font-size: clamp(14px, 2.4vw, 16px) }
.gq-score{font-size:clamp(28px, 5vw, 42px); font-weight:900; line-height:1.1; margin:.2rem 0 .5rem; color:var(--gq-accent)}
.gq-eval{font-size:clamp(15px, 2.5vw, 18px); line-height:1.55; margin-bottom:1rem}

/* Sound button (top-right) */
.gq-tools{position:absolute; top:0; right:0; display:flex; gap:8px; align-items:center}
.gq-tool{
  appearance:none; -webkit-appearance:none;
  width:38px; height:38px; min-width:38px; min-height:38px; padding:0; margin:0; border-radius:10px;
  display:inline-grid; place-items:center; color: var(--gq-fg); line-height:1; text-align:center;
  background: color-mix(in srgb, var(--gq-fg) 6%, transparent); border:1px solid var(--gq-border);
  transition: background .15s ease, transform .06s ease;
  box-shadow:none !important; text-shadow:none !important;
}
.gq-tool:hover{ background: color-mix(in srgb, var(--gq-fg) 12%, transparent); transform:none }
.gq-tool svg{ width:21px; height:21px; display:block; margin:auto; filter:none }
.gq-theme svg{ width:20px; height:20px }
.gq-locked{text-align:center}
.gq-member-link,
.gq-member-link:visited{
  display:flex; align-items:center; justify-content:flex-start; gap:.4rem;
  width:100%; padding:.72rem .9rem; border-radius:10px;
  color:var(--gq-fg, #111827); background: color-mix(in srgb, var(--gq-accent, #0f766e) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--gq-accent, #0f766e) 32%, transparent);
  font-weight:800; text-decoration:none; letter-spacing:0; text-transform:none;
  box-shadow:none;
}
.gq-member-link:hover{background: color-mix(in srgb, var(--gq-accent, #0f766e) 16%, transparent); text-decoration:none}
.gq-member-link-item{list-style:none}

/* Dark mode */
[data-site-skin="dark"] .gq-wrap{ background: var(--mow-ebc, #1d1d1d); color: var(--mow-hc, #ddd); border-color: var(--mow-border-color, #333) }
[data-site-skin="dark"] .gq-sub{ color:#999 }
[data-site-skin="dark"] .gq-wrap[data-gq-theme="light"]{ background:#ffffff; color:#111827; border-color:#d9e2df }
[data-site-skin="dark"] .gq-bank{ background:#202f2d; border-color:#35504b; color:#cfe5df }
[data-site-skin="dark"] .gq-meta{ background:#252525; border-color:#3a3a3a; color:#ddd }
[data-site-skin="dark"] .gq-choices .gq-opt{ background:#1f1f1f; border-color:#3a3a3a; color:#e6e6e6 }
[data-site-skin="dark"] .gq-choices .gq-opt:hover{ background:#2a2a2a }
[data-site-skin="dark"] .gq-choices .gq-opt.correct{ background: color-mix(in srgb, #16a34a 28%, transparent); border-color:#16a34a; color:#ecffec }
[data-site-skin="dark"] .gq-choices .gq-opt.wrong{ background: color-mix(in srgb, #e11d48 26%, transparent); border-color:#e11d48; color:#fff2f2 }
[data-site-skin="dark"] .gq-explain{ background:#1f1f1f; border-color:#3a3a3a; color:#ddd }
[data-site-skin="dark"] .gq-tool{ color:#eee; background:#252525; border-color:#3a3a3a }
[data-site-skin="dark"] .gq-tool:hover{ background:#333 }
.gq-wrap[data-gq-theme="dark"] .gq-sub{ color:var(--gq-muted) }
.gq-wrap[data-gq-theme="dark"] .gq-bank{ background:#1c2d2a; border-color:#35504b; color:#cfe5df }
.gq-wrap[data-gq-theme="dark"] .gq-meta{ background:#1d2523; border-color:#33433f; color:#d8e6e2 }
.gq-wrap[data-gq-theme="dark"] .gq-choices .gq-opt{ background:#1b2220; border-color:#33433f; color:#edf7f4 }
.gq-wrap[data-gq-theme="dark"] .gq-choices .gq-opt:hover{ background:#23302d }
.gq-wrap[data-gq-theme="dark"] .gq-choices .gq-opt.correct{ background: color-mix(in srgb, #16a34a 30%, #10201a); border-color:#22c55e; color:#ecffec }
.gq-wrap[data-gq-theme="dark"] .gq-choices .gq-opt.wrong{ background: color-mix(in srgb, #e11d48 28%, #211016); border-color:#fb7185; color:#fff2f2 }
.gq-wrap[data-gq-theme="dark"] .gq-explain{ background:#1b2220; border-color:#33433f; color:#d8e6e2 }
.gq-wrap[data-gq-theme="dark"] .gq-tool{ color:#edf7f4; background:#1b2220; border-color:#33433f }
.gq-wrap[data-gq-theme="dark"] .gq-back{ color:#edf7f4; background:#1b2220; border-color:#33433f }
.gq-wrap[data-gq-theme="light"] .gq-bank{ background: color-mix(in srgb, #0f766e 8%, transparent); border-color:#d9e2df; color:#5f6f6a }
.gq-wrap[data-gq-theme="light"] .gq-meta{ background: color-mix(in srgb, #111827 5%, transparent); border-color:#d9e2df; color:#1f2937 }
.gq-wrap[data-gq-theme="light"] .gq-choices .gq-opt{ background: color-mix(in srgb, #111827 6%, transparent); border-color:#d9e2df; color:#111827 }
.gq-wrap[data-gq-theme="light"] .gq-choices .gq-opt:hover{ background: color-mix(in srgb, #111827 12%, transparent) }
.gq-wrap[data-gq-theme="light"] .gq-choices .gq-opt.correct{ background: color-mix(in srgb, #16a34a 18%, transparent); border-color:#16a34a; color:#0b1f0b }
.gq-wrap[data-gq-theme="light"] .gq-choices .gq-opt.wrong{ background: color-mix(in srgb, #e11d48 16%, transparent); border-color:#e11d48; color:#3d0a14 }
.gq-wrap[data-gq-theme="light"] .gq-explain{ background: color-mix(in srgb, #111827 4%, transparent); border-color:#d9e2df; color:#1f2937 }
.gq-wrap[data-gq-theme="light"] .gq-tool{ color:#111827; background: color-mix(in srgb, #111827 6%, transparent); border-color:#d9e2df }
.gq-wrap[data-gq-theme="light"] .gq-back{ color:#111827; background: color-mix(in srgb, #111827 5%, transparent); border-color:#d9e2df }
@media (max-width:520px){
  .gq-wrap{padding:20px}
  .gq-head{padding-right:0; padding-top:46px}
  .gq-tools{left:0; right:auto}
}