/* "My quizzes" (kviz.js) and the pupils' page (igraj.js) */
.kv{--kv-good:#16a34a;--kv-bad:#dc2626;margin:8px 0 24px}
.kv [hidden]{display:none!important}
.kv-msg{min-height:1.4em;font-weight:600}
.kv-msg.bad{color:var(--kv-bad)}
.kv-form{display:flex;flex-direction:column;gap:12px;max-width:30em}
.kv-form label,.kv-field{display:flex;flex-direction:column;gap:4px;font-weight:600}
.kv-form label.kv-check,.kv-check{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400}
.kv input[type=search],.kv input[type=email],.kv input[type=text],.kv input[type=password],.kv input[type=datetime-local],.kv input:not([type]),.kv input[inputmode],.kv textarea,.kv select{
  font:inherit;padding:9px 11px;border-radius:10px;border:1px solid var(--line-strong,#b8c2d1);background:var(--surface,#fff);color:var(--ink,#111);max-width:100%;box-sizing:border-box}
.kv textarea{width:100%;min-height:4.5em;resize:vertical}
.kv-help{font-weight:400;font-size:.88em;opacity:.8}
.kv-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19em),1fr));gap:20px 36px;align-items:start}
.kv-box{border:1px solid var(--line,#dde3ec);border-radius:16px;padding:16px 18px;background:var(--surface,#fff);margin:14px 0}
.kv-box h2,.kv-box h3{margin-top:0}
.kv-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:10px 0}
.kv-bar .grow{flex:1 1 auto}
.kv-btn{font:inherit;font-size:.92rem;background:var(--surface,#fff);color:var(--ink,#111);border:1px solid var(--line-strong,#b8c2d1);border-radius:999px;padding:6px 14px;cursor:pointer;min-height:36px}
.kv-btn:hover{border-color:var(--btn,#2563eb)}
.kv-btn.main{background:var(--btn,#2563eb);color:#fff;border-color:var(--btn,#2563eb)}
.kv-btn.danger{color:var(--kv-bad)}
.kv-btn:disabled{opacity:.5;cursor:default}
.kv-list{list-style:none;padding:0;margin:8px 0}
.kv-list>li{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line,#e5e7eb)}
.kv-list .kv-t{flex:1 1 14em;min-width:0;overflow-wrap:anywhere}
.kv-list .kv-t strong{display:block}
.kv-sub{font-size:.88em;opacity:.75}
.kv-tag{display:inline-block;padding:1px 9px;border-radius:99px;font-size:.82em;font-weight:600;background:var(--tag-grey-bg,#e5e7eb);color:var(--tag-grey-ink,#333)}
.kv-tag.ok{background:var(--tag-green-bg,#dcfce7);color:var(--tag-green-ink,#14532d)}
.kv-tag.wait{background:#fef3c7;color:#78350f}
/* editor */
.kv-q{border:1px solid var(--line,#dde3ec);border-radius:16px;padding:14px 16px;margin:14px 0;background:var(--surface,#fff)}
.kv-qhead{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:10px}
.kv-qhead h3{margin:0;font-size:1.05rem;flex:1 1 auto}
.kv-qtools{display:flex;gap:4px;flex-wrap:wrap}
.kv-icon{font:inherit;min-width:36px;min-height:36px;border-radius:10px;border:1px solid var(--line-strong,#b8c2d1);background:var(--surface,#fff);color:var(--ink,#111);cursor:pointer}
.kv-opts{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.kv-opt{display:flex;gap:8px;align-items:center}
.kv-opt input[type=text],.kv-opt input:not([type]){flex:1 1 auto;min-width:0}
.kv-opt label{display:flex;gap:4px;align-items:center;font-size:.9em;white-space:nowrap;font-weight:400}
.kv-opt.right input[type=text],.kv-opt.right input:not([type]){border-color:var(--kv-good);box-shadow:0 0 0 1px var(--kv-good)}
.kv-img{max-width:min(100%,420px);max-height:300px;display:block;margin:8px 0;border-radius:10px;border:1px solid var(--line,#ddd);background:#fff}
.kv-prev{margin:8px 0;padding:8px 12px;border-left:4px solid var(--btn,#2563eb);background:var(--bg,#f6f8fc);border-radius:6px;overflow-x:auto}
.kv-prev:empty{display:none}
.kv-file{position:absolute;opacity:0;width:1px;height:1px}
.kv-sticky{position:sticky;bottom:0;z-index:5;background:var(--bg,#f6f8fc);padding:10px 0;border-top:1px solid var(--line,#ddd)}
/* live / homework for the teacher */
.kv-share{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.kv-qr{width:min(230px,64vw);background:#fff;padding:10px;border-radius:12px;border:1px solid var(--line,#ddd)}
.kv-qr svg{display:block;width:100%;height:auto}
.kv-bigcode{display:block;font-size:clamp(3rem,13vw,6.5rem);font-weight:700;letter-spacing:.1em;line-height:1.05}
.kv-link{word-break:break-all;font-weight:600}
.kv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.kv-chip{font:inherit;font-weight:600;padding:6px 14px;border-radius:99px;border:0;background:var(--tag-bg,#dbeafe);color:var(--tag-ink,#1e3a8a);cursor:pointer;animation:kv-pop .3s}
@keyframes kv-pop{from{transform:scale(.6);opacity:0}}
.kv-tw{overflow-x:auto}
.kv-table{width:100%;border-collapse:collapse}
.kv-table th,.kv-table td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line,#e5e7eb);white-space:nowrap}
.kv-table td.c,.kv-table th.c{text-align:center}
.kv-table .good{color:var(--kv-good);font-weight:700}.kv-table .bad{color:var(--kv-bad);font-weight:700}
.kv-meter{display:inline-block;width:6em;height:.7em;border-radius:99px;background:var(--line,#e5e7eb);vertical-align:middle;overflow:hidden}
.kv-meter span{display:block;height:100%;background:var(--kv-good)}
.kv-meter.low span{background:var(--kv-bad)}
.kv-qstats{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.kv-qstats li{display:flex;gap:10px;align-items:center}
.kv-qstats .kv-qt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv-away{display:inline-block;margin-left:6px;padding:0 8px;border-radius:99px;background:#fee2e2;color:#991b1b;font-size:.82em;font-weight:600}
.kv-away.now{background:var(--kv-bad);color:#fff}
.kv-podium{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:18px 0}
.kv-podium div{flex:0 1 9em;text-align:center;border-radius:14px 14px 0 0;padding:10px 6px;color:#fff;font-weight:700;overflow-wrap:anywhere}
.kv-podium .p1{background:#d97706;min-height:9em}.kv-podium .p2{background:#64748b;min-height:7em}.kv-podium .p3{background:#b45309;min-height:5.5em}
.kv-podium b{display:block;font-size:2rem}
.kv-big{position:fixed;inset:0;z-index:1000;background:#fff;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;padding:3vh;text-align:center}
.kv-big .kv-qr{width:min(62vh,88vw);border:0}
.kv-big .kv-bigcode{font-size:min(13vh,15vw)}
/* the pupils' page */
.kv-play{max-width:46em}
.kv-code-in{font-size:1.8rem!important;letter-spacing:.15em;max-width:9em!important;text-align:center}
.pl-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;font-weight:600;margin-bottom:8px}
.pl-timer{height:10px;border-radius:99px;background:var(--line,#e5e7eb);overflow:hidden;margin:6px 0 14px}
.pl-timer span{display:block;height:100%;width:100%;background:var(--btn,#2563eb);transition:width .2s linear}
.pl-timer.low span{background:var(--kv-bad)}
.pl-q{font-size:clamp(1.15rem,1rem + .8vw,1.6rem);font-weight:600;margin:6px 0 14px;overflow-wrap:anywhere}
.pl-q .kv-img{max-height:42vh}
.pl-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14em),1fr));gap:10px}
.pl-opt{font:inherit;font-size:1.1rem;font-weight:600;min-height:72px;padding:12px 14px;border-radius:14px;border:3px solid transparent;color:#fff;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:10px;overflow-wrap:anywhere;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.pl-opt:nth-child(6n+1){background:#2563eb}.pl-opt:nth-child(6n+2){background:#0d9488}.pl-opt:nth-child(6n+3){background:#d97706}
.pl-opt:nth-child(6n+4){background:#db2777}.pl-opt:nth-child(6n+5){background:#7c3aed}.pl-opt:nth-child(6n+6){background:#0369a1}
.pl-opt.tf-t{background:#16a34a!important}.pl-opt.tf-f{background:#dc2626!important}
.pl-opt[aria-pressed=true]{border-color:#111;outline:3px solid #fff;outline-offset:-6px}
.pl-opt:disabled{cursor:default}
.pl-opt.dim{opacity:.35}
.pl-opt.is-right{outline:4px solid var(--kv-good);outline-offset:2px;opacity:1}
.pl-opt.is-wrong{outline:4px solid var(--kv-bad);outline-offset:2px}
.pl-opt .mark{margin-left:auto;font-size:1.4rem}
.pl-fb{margin:14px 0;padding:14px 16px;border-radius:14px;color:#fff;font-weight:700;font-size:1.25rem;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.pl-fb.good{background:var(--kv-good)}.pl-fb.bad{background:var(--kv-bad)}
.pl-fb .sol{font-weight:600;font-size:1rem;flex-basis:100%}
.pl-text{display:flex;gap:10px;flex-wrap:wrap}
.pl-text input{flex:1 1 12em;font-size:1.2rem!important}
.pl-wait{text-align:center;padding:30px 0}
.pl-wait .dots::after{content:"";animation:kv-dots 1.5s steps(4) infinite}
@keyframes kv-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.pl-end{text-align:center}
.pl-end .big{font-size:clamp(2.2rem,8vw,3.6rem);font-weight:800;margin:6px 0}
.pl-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0}
.pl-dots span{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:700}
.pl-dots .g{background:var(--kv-good)}.pl-dots .b{background:var(--kv-bad)}
.pl-top5{list-style:none;padding:0;max-width:22em;margin:10px auto;text-align:left}
.pl-top5 li{display:flex;justify-content:space-between;padding:6px 10px;border-radius:8px}
.pl-top5 li.me{background:var(--tag-bg,#dbeafe);font-weight:700}
@media (prefers-reduced-motion:reduce){.kv-chip,.pl-wait .dots::after{animation:none}.pl-timer span{transition:none}}
.kv-tabs{display:flex;gap:6px;border-bottom:2px solid var(--line,#dde3ec);margin:6px 0 14px;flex-wrap:wrap}
.kv-tab{font:inherit;font-weight:600;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 14px;cursor:pointer;color:var(--secondary,#555)}
.kv-tab[aria-selected=true]{color:var(--ink,#111);border-bottom-color:var(--btn,#2563eb)}
.kv-oimg{max-height:56px;max-width:90px;background:#fff;border-radius:6px}
.pl-qt{white-space:pre-line}
.pl-oimg{max-height:110px;max-width:min(60vw,220px);background:#fff;border-radius:8px;padding:2px}
.kv details.kv-box summary{cursor:pointer}
.kv-link-btn{font:inherit;background:none;border:0;padding:0;color:var(--link,#1d4ed8);text-decoration:underline;cursor:pointer}
.kv-box .kv-box{margin-top:12px}