/* «Конструктор контрольних робіт» (zno-konstruktor.php). Palette follows the avani theme and quiz.css.
   The theme paints every button:hover/:focus red with white text — all buttons here reset that. */
/* the constructor page is full width: no sidebar */
.zno-konstruktor-page #secondary { display: none; }
body.zno-konstruktor-page .content-area,
body.zno-konstruktor-page .site-main { float: none; width: auto; max-width: none; }

.zk, .zk-dialog, #zk-print { --zk-blue: #0067ac; --zk-dark: #004d80; --zk-line: #d6e3ee; --zk-bg: #f6f9fc; --zk-text: #222;
  --zk-muted: #5f6b77; --zk-ok: #1a7f37; --zk-warn: #8a5a00; --zk-bad: #b42318; }
.zk { margin: 1.5em 0; color: var(--zk-text); }
.zk *, .zk-dialog *, #zk-print * { box-sizing: border-box; }
.zk button, .zk-dialog button, .zk select, .zk-dialog select {
  font: inherit; text-transform: none; letter-spacing: normal; line-height: 1.3; box-shadow: none; }
.zk select, .zk-dialog select, .zk input { width: auto; max-width: 100%; margin-bottom: 0; }
.zk input[type=checkbox], .zk input[type=radio], .zk-dialog input[type=checkbox], .zk-dialog input[type=radio] { margin-bottom: 0; }
.zk-loading { color: var(--zk-muted); }

.zk-btn, .zk-dialog .zk-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55em 1.1em;
  border: 1px solid var(--zk-blue); border-radius: 6px; background: var(--zk-blue); color: #fff; cursor: pointer; font-weight: 600; }
.zk-btn:hover, .zk-btn:focus-visible { background: var(--zk-dark); border-color: var(--zk-dark); color: #fff; }
.zk-btn:disabled { background: #c9d1da; border-color: #c9d1da; color: #fff; cursor: not-allowed; }
.zk-btn--ghost, .zk-dialog .zk-btn--ghost { background: #fff; color: var(--zk-blue); }
.zk-btn--ghost:hover, .zk-btn--ghost:focus-visible { background: #eef3f8; color: var(--zk-dark); }
.zk-btn--small { min-height: 36px; padding: .35em .8em; font-size: .92em; }
.zk-link, .zk-dialog .zk-link { padding: 0; border: 0; background: none; color: var(--zk-blue); cursor: pointer;
  border-bottom: 1px dashed currentColor; border-radius: 0; font-size: .92em; font-weight: 400; min-height: 0; }
.zk-link:hover, .zk-link:focus-visible { background: none; color: var(--zk-dark); }
.zk :focus-visible, .zk-dialog :focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }

/* steps */
.zk-steps { display: flex; flex-wrap: wrap; gap: .35em; margin: 0 0 1.2em; padding: 0; counter-reset: s; }
.zk-step { display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: .3em .75em; border: 1px solid var(--zk-line);
  border-radius: 999px; background: #fff; color: var(--zk-text); cursor: pointer; font-size: .92em; }
.zk-step span { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #eef3f8; font-size: .85em; font-weight: 700; }
.zk-step:hover, .zk-step:focus-visible { background: #eef3f8; color: var(--zk-text); }
.zk-step.is-cur { border-color: var(--zk-blue); background: var(--zk-blue); color: #fff; }
.zk-step.is-cur span { background: #fff; color: var(--zk-blue); }
.zk-step:disabled { opacity: .45; cursor: default; background: #fff; color: var(--zk-text); }
.zk-body { padding: 1.1em 1.2em; border: 1px solid var(--zk-line); border-radius: 10px; background: var(--zk-bg); }
.zk-h { margin: 0 0 .5em; font-size: 1.3em; color: var(--zk-dark); }
.zk-h3 { margin: 1.5em 0 .5em; font-size: 1.1em; color: var(--zk-dark); }
.zk-hint { margin: 0 0 1em; color: var(--zk-muted); font-size: .95em; }
.zk-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em; margin: 1.4em 0 0; }
.zk-nav-note { color: var(--zk-muted); font-size: .92em; margin-left: auto; }
.zk-warn { color: var(--zk-warn); }
.zk-alert { margin: 0 0 1em; padding: .7em .9em; border-left: 4px solid #e0a100; background: #fff8e1; border-radius: 0 8px 8px 0; }
.zk-alert p, .zk-alert ul { margin: 0 0 .5em; }
.zk-empty { color: var(--zk-muted); }

/* 1. subject & grade */
.zk-seg { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0 0 1em; border: 1px solid var(--zk-blue); border-radius: 8px; overflow: hidden; }
.zk-segbtn { min-height: 44px; padding: .5em 1em; border: 0; background: #fff; color: var(--zk-blue); cursor: pointer; font-weight: 600; border-radius: 0; }
.zk-segbtn:hover, .zk-segbtn:focus-visible { background: #eef3f8; color: var(--zk-dark); }
.zk-segbtn.is-on { background: var(--zk-blue); color: #fff; }
.zk-grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5em; }
.zk-grade { display: flex; flex-direction: column; align-items: flex-start; gap: .15em; min-height: 64px; padding: .6em .75em;
  border: 1px solid var(--zk-line); border-radius: 8px; background: #fff; color: var(--zk-text); cursor: pointer; text-align: left; }
.zk-grade b { font-size: 1.05em; }
.zk-grade small { color: var(--zk-muted); font-size: .8em; }
.zk-grade small.zk-warn { color: var(--zk-warn); }
.zk-grade:hover, .zk-grade:focus-visible { border-color: var(--zk-blue); background: #fff; color: var(--zk-text); }
.zk-grade.is-on { border: 2px solid var(--zk-blue); background: #eef6fc; }
.zk-grade:disabled { opacity: .5; cursor: default; }

/* 2. topics */
.zk-sec { margin: 0 0 1em; padding: .4em .8em .6em; border: 1px solid var(--zk-line); border-radius: 8px; background: #fff; }
.zk-sec legend { padding: 0 .3em; font-weight: 700; color: var(--zk-dark); }
.zk-topic { display: flex; gap: .6em; align-items: flex-start; padding: .45em 0; cursor: pointer; border-top: 1px solid #eef3f8; }
.zk-topic:first-of-type { border-top: 0; }
.zk-topic input { width: 20px; height: 20px; margin: .15em 0 0; flex: none; }
.zk-topic b { display: block; font-weight: 600; }
.zk-topic small { color: var(--zk-muted); }

/* 3. counts */
.zk-counts { display: grid; gap: .5em; margin: 0 0 .8em; }
.zk-count { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .6em .8em; border: 1px solid var(--zk-line); border-radius: 8px; background: #fff; }
.zk-count b { display: block; }
.zk-count small { color: var(--zk-muted); }
.zk-num { display: inline-flex; align-items: center; flex: none; }
.zk-num button { width: 40px; height: 40px; padding: 0; border: 1px solid #c9d6e2; background: #fff; color: var(--zk-text); cursor: pointer; font-size: 1.2em; border-radius: 6px; }
.zk-num button:hover, .zk-num button:focus-visible { background: #eef3f8; color: var(--zk-text); }
.zk-num input, .zk-table input { width: 3.6em; height: 40px; margin: 0 .3em; padding: 0 .3em; border: 1px solid #c9d6e2; border-radius: 6px; text-align: center; font: inherit; }
.zk-table-wrap { overflow-x: auto; margin: 0 0 .8em; }
.zk-table { border-collapse: collapse; background: #fff; font-size: .92em; min-width: 100%; }
.zk-table th, .zk-table td { padding: .4em .5em; border: 1px solid var(--zk-line); text-align: center; vertical-align: middle; }
.zk-table th[scope="row"] { text-align: left; font-weight: 600; min-width: 12em; }
.zk-table td small { display: block; color: var(--zk-muted); font-size: .8em; }
.zk-table .zk-na { color: #b0b8c1; }

/* 4. review */
.zk-sum { margin: 0 0 1em; padding: .6em .9em; border-radius: 8px; background: #e7f4ea; color: #12512a; }
.zk-sum.is-bad { background: #fdecea; color: var(--zk-bad); }
.zk-filters { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1em; }
.zk-filters select, .zk-filters input { min-height: 40px; padding: .3em .5em; border: 1px solid #c9d6e2; border-radius: 6px; background: #fff; font: inherit; font-size: .92em; max-width: 100%; }
.zk-filters input { flex: 1 1 12em; }
.zk-group { margin: 0 0 1.4em; }
.zk-group h3, .zk-block { margin: 0 0 .6em; font-size: 1.02em; color: var(--zk-dark); }
.zk-group h3 small { font-weight: 400; color: var(--zk-muted); font-size: .85em; }
.zk-card { position: relative; display: flex; flex-wrap: wrap; gap: .5em 1em; margin: 0 0 .6em; padding: .8em .9em; border: 1px solid var(--zk-line); border-radius: 8px; background: #fff; }
.zk-card.is-off { background: #f3f4f6; }
.zk-card.is-off .zk-card-body { opacity: .5; }
.zk-card-body { flex: 1 1 22em; min-width: 0; }
.zk-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; flex: 0 1 auto; }
.zk-num-badge { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; border-radius: 50%; background: #eef3f8; font-weight: 700; color: var(--zk-dark); }
.zk-act { min-height: 36px; padding: .3em .7em; border: 1px solid #c9d6e2; border-radius: 6px; background: #fff; color: var(--zk-text); cursor: pointer; font-size: .9em; }
.zk-act:hover, .zk-act:focus-visible { background: #eef3f8; color: var(--zk-text); }
.zk-switch { display: inline-flex; align-items: center; gap: .35em; font-size: .9em; cursor: pointer; min-height: 36px; }
.zk-switch input { width: 18px; height: 18px; margin: 0; }
.zk-badge { display: inline-block; margin: 0 .4em .4em 0; padding: .1em .5em; border-radius: 999px; background: #eef3f8; color: var(--zk-dark); font-size: .78em; font-weight: 600; }
.zk-badge--fix { background: #e7f4ea; color: #12512a; }
.zk-badge--warn { background: #fff1b8; color: var(--zk-warn); }
.zk-q { margin: 0 0 .4em; font-weight: 600; }
.zk-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: .2em; }
.zk-opts li { margin: 0; padding: .15em .4em; border-radius: 4px; }
.zk-opts li.is-key { background: #e7f4ea; font-weight: 600; }
.zk-l { display: inline-block; min-width: 1.4em; font-weight: 700; color: var(--zk-dark); }
.zk-word { margin: 0; font-size: 1.15em; }
.zk-gap { display: inline-block; min-width: 1.6em; border-bottom: 2px solid var(--zk-text); text-align: center; color: transparent; line-height: 1; }
.zk-choices { color: var(--zk-muted); font-size: .85em; }
.zk-keytxt, .zk-stress, .zk-mark { color: var(--zk-ok); font-weight: 700; }
.zk-stress { text-decoration: underline; }
.zk-mark { padding: 0 .05em; background: #e7f4ea; }
.zk-sent { margin: 0; line-height: 1.7; }
.zk-alt { margin: .3em 0 0; color: var(--zk-muted); font-size: .9em; }
.zk-expl { margin: .5em 0 0; font-size: .92em; color: #444; }
.zk-expl summary { cursor: pointer; color: var(--zk-blue); }
.zk-expl p { margin: .3em 0 0; }

/* 5. variants */
.zk-varbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.2em; margin: 0 0 1em; }
.zk-varbar select { min-height: 40px; margin-left: .3em; padding: 0 .4em; border: 1px solid #c9d6e2; border-radius: 6px; font: inherit; }
.zk-check { display: inline-flex; align-items: center; gap: .4em; cursor: pointer; min-height: 36px; }
.zk-check input { width: 18px; height: 18px; margin: 0; }
.zk-tabs { display: flex; flex-wrap: wrap; gap: .3em; margin: 0 0 .8em; }
.zk-tab { min-height: 40px; padding: .35em .9em; border: 1px solid var(--zk-line); border-radius: 8px 8px 0 0; background: #fff; color: var(--zk-text); cursor: pointer; }
.zk-tab:hover, .zk-tab:focus-visible { background: #eef3f8; color: var(--zk-text); }
.zk-tab.is-on { border-color: var(--zk-blue); background: var(--zk-blue); color: #fff; }
.zk-variant .zk-block { margin-top: 1em; }

/* 6. print form + preview */
.zk-form { display: grid; gap: .8em; max-width: 34em; }
.zk-f { display: grid; gap: .3em; margin: 0; padding: 0; border: 0; font-weight: 600; font-size: .95em; }
.zk-f legend { padding: 0; margin: 0 0 .3em; }
.zk-f input[type=text], .zk-f textarea { width: 100%; min-height: 40px; padding: .4em .6em; border: 1px solid #c9d6e2; border-radius: 6px; font: inherit; font-weight: 400; background: #fff; }
.zk-f .zk-check { font-weight: 400; }
.zk-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.zk-preview { max-height: 70vh; overflow: auto; padding: 1em; border: 1px solid var(--zk-line); border-radius: 8px; background: #e9edf1; }
.zk-preview .zk-sheet { margin: 0 auto 1em; padding: 1.4em 1.6em; max-width: 46em; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.zk-sheet-h h2 { margin: 0 0 .2em; font-size: 1.2em; color: #000; }
.zk-sheet-h p { margin: 0 0 .3em; }
.zk-name { margin: .4em 0 1em !important; }
.zk-sheet .zk-block { margin: 1em 0 .5em; font-size: 1em; color: #000; }
.zk-ptask { display: flex; gap: .5em; margin: 0 0 .8em; break-inside: avoid; page-break-inside: avoid; }
.zk-pn { flex: none; min-width: 1.8em; font-weight: 700; }
.zk-ptask .zk-opts { grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 0 1em; }
.zk-ptask .zk-opts li { padding: .05em .2em; }
.zk-opts--inline { display: flex; flex-wrap: wrap; gap: .2em 2.2em; }
.zk-none { color: var(--zk-muted); }
.zk-keytab--grid { width: 100%; }
.zk-keytab--grid td, .zk-keytab--grid thead th { width: auto; text-align: left; }
.zk-ptask .zk-word { letter-spacing: .06em; }
.zk-ptask .zk-sent { word-spacing: .6em; line-height: 2; }
.zk-ans, .zk-keytab, .zk-scale { border-collapse: collapse; margin: 0 0 1em; }
.zk-ans th, .zk-ans td, .zk-keytab th, .zk-keytab td, .zk-scale th, .zk-scale td { padding: .3em .5em; border: 1px solid #999; text-align: left; vertical-align: top; }
.zk-ans { width: 100%; }
.zk-ans th, .zk-keytab th { width: 2.5em; text-align: center; }
.zk-box { display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; margin: 0 .3em 0 0; padding: 0 .2em; border: 1px solid #555; font-size: .9em; }
.zk-line { display: inline-block; width: 100%; min-width: 12em; height: 1.4em; border-bottom: 1px solid #555; }
.zk-score { margin: .8em 0 0; }
.zk-kexpl { margin: .2em 0 0; font-size: .85em; color: #444; }
.zk-scale td, .zk-scale th { text-align: center; font-size: .85em; }

/* dialog */
.zk-dialog { width: min(40em, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.zk-dialog::backdrop { background: rgba(0, 20, 40, .45); }
.zk-dlg { display: grid; gap: .8em; padding: 1.2em 1.3em; color: #222; }
.zk-dlg h3 { margin: 0; font-size: 1.2em; color: #004d80; }
.zk-dlg .zk-hint { margin: 0; color: #5f6b77; font-size: .92em; }
.zk-dlg .zk-word { font-size: 1.2em; }
.zk-dlg .zk-l { color: #004d80; }
.zk-optrow { display: flex; align-items: center; gap: .5em; margin: 0 0 .4em; font-weight: 400; }
.zk-optrow input[type=radio] { width: 18px; height: 18px; margin: 0; flex: none; }
.zk-optrow input[type=text] { flex: 1; min-height: 38px; padding: .3em .5em; border: 1px solid #c9d6e2; border-radius: 6px; font: inherit; }
.zk-vowels { display: flex; flex-wrap: wrap; align-items: flex-end; font-size: 1.6em; margin: 0; font-weight: 400; }
.zk-vowel { display: inline-flex; flex-direction: column; align-items: center; cursor: pointer; }
.zk-vowel input { width: 16px; height: 16px; margin: 0 0 .1em; }
.zk-vowel span { padding: 0 .05em; border-bottom: 2px solid #0067ac; }
.zk-punct-edit { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; margin: 0; font-weight: 400; line-height: 2; }
.zk-punct-edit select { min-height: 32px; padding: 0 .2em; border: 1px solid #c9d6e2; border-radius: 4px; background: #fff; font: inherit; }
.zk-req { color: #b42318; font-weight: 400; font-size: .85em; }
.zk-dlg-msg { margin: 0; color: #b42318; min-height: 1em; }
.zk-dlg-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5em; }
.zk-cands { display: grid; gap: .5em; max-height: 50vh; overflow: auto; }
.zk-cand { display: block; width: 100%; padding: .7em .8em; border: 1px solid #d6e3ee; border-radius: 8px; background: #fff; color: #222; text-align: left; cursor: pointer; font: inherit; }
.zk-cand:hover, .zk-cand:focus-visible { border-color: #0067ac; background: #f6f9fc; color: #222; }

.zk-toast { position: fixed; left: 50%; bottom: 16px; z-index: 100000; max-width: min(36em, calc(100vw - 32px)); padding: .8em 1em; border-radius: 8px;
  background: #1f2933; color: #fff; font-size: .95em; transform: translate(-50%, 150%); transition: transform .25s; }
.zk-toast.is-on { transform: translate(-50%, 0); }

.zk-about { margin: 2em 0 0; }
.zk-about h2 { font-size: 1.2em; }

@media (max-width: 600px) {
  .zk-body { padding: .9em .8em; }
  .zk-step { padding: .3em .55em; font-size: .85em; }
  .zk-row { grid-template-columns: 1fr; }
  .zk-card-acts { width: 100%; }
  .zk-nav .zk-btn { flex: 1 1 auto; }
  .zk-preview { padding: .4em; }
  .zk-preview .zk-sheet { padding: 1em .8em; }
}

/* printing: only the sheets */
#zk-print { display: none; }
@media print {
  body.zk-printing > *:not(#zk-print) { display: none !important; }
  body.zk-printing #zk-print { display: block; }
  @page { size: A4; margin: 15mm; }
  #zk-print { font: 12pt/1.4 "Times New Roman", Times, serif; color: #000; }
  #zk-print .zk-sheet { break-after: page; page-break-after: always; }
  #zk-print .zk-sheet:last-child { break-after: auto; page-break-after: auto; }
  #zk-print .zk-opts li.is-key { background: none; }
  #zk-print .zk-mark, #zk-print .zk-keytxt, #zk-print .zk-stress { color: #000; background: none; }
  #zk-print .zk-l, #zk-print .zk-sheet-h h2, #zk-print .zk-block { color: #000; }
  #zk-print .zk-gap { min-width: 2em; }
  #zk-print .zk-opts li { margin: 0; }
  #zk-print .zk-ptask { margin: 0 0 .55em; }
  #zk-print .zk-q, #zk-print .zk-word, #zk-print .zk-sent { margin: 0 0 .15em; }
  #zk-print .zk-ans th, #zk-print .zk-ans td { padding: .2em .5em; }
}