/* BilgymFlow — Training Mode (herné okno)
   Načítava sa vždy, ale bez aktívnej tréningovej session sa nič nerenderuje.
   Všetko je pod #bf-training, aby to nikdy nekolidovalo s app štýlmi. */

#bf-training{
  /* Zámerne POD všetkými modálmi aplikácie (.modal-bg má z-index 1000).
     Keď učiteľ otvorí formulár, tréningové okno ho nesmie prekrývať. */
  position:fixed;right:16px;bottom:16px;z-index:900;
  width:300px;max-width:calc(100vw - 24px);
  font-family:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border:1.5px solid #3f7de6;border-radius:16px;
  box-shadow:0 14px 40px rgba(20,40,80,.22);
  overflow:hidden;transition:transform .2s ease,opacity .2s ease;
}
#bf-training[hidden]{display:none!important}
#bf-training .bft-head{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 12px;background:linear-gradient(90deg,#3f7de6,#4c3ddf);color:#fff;
}
#bf-training .bft-head .bft-title{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;flex:1}
#bf-training .bft-head .bft-min{background:none;border:none;color:#fff;font-size:15px;line-height:1;cursor:pointer;padding:0 2px;font-family:inherit}
#bf-training .bft-body{padding:13px 14px 14px}
#bf-training.bft-collapsed .bft-body{display:none}
#bf-training.bft-collapsed{width:auto}
#bf-training .bft-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;color:#64748b;letter-spacing:.4px;text-transform:uppercase;margin-bottom:7px}
#bf-training .bft-bar{height:4px;border-radius:99px;background:rgba(63,125,230,.16);overflow:hidden;margin-bottom:11px}
#bf-training .bft-bar i{display:block;height:100%;background:linear-gradient(90deg,#3f7de6,#77b848);transition:width .35s ease}
#bf-training .bft-task{font-size:13px;font-weight:800;color:#0f172a;line-height:1.3;margin-bottom:5px}
#bf-training .bft-brief{font-size:12px;color:#475569;line-height:1.55;margin-bottom:9px}
#bf-training .bft-pts{display:inline-block;font-size:10px;font-weight:900;color:#3a7a14;background:rgba(119,184,72,.15);border-radius:99px;padding:2px 9px;margin-bottom:10px}
#bf-training .bft-btns{display:flex;gap:6px;flex-wrap:wrap}
#bf-training button.bft-b{font-family:inherit;font-size:11px;font-weight:700;padding:6px 11px;border-radius:9px;cursor:pointer;border:1.5px solid #cbd5e1;background:rgba(255,255,255,.9);color:#475569;transition:all .15s}
#bf-training button.bft-b:hover{border-color:#3f7de6;color:#3f7de6;background:#eff6ff}
#bf-training button.bft-b.bft-primary{background:#3f7de6;border-color:#3f7de6;color:#fff}
#bf-training button.bft-b.bft-primary:hover{background:#2563eb;color:#fff}
#bf-training .bft-help{font-size:11.5px;color:#334155;line-height:1.55;background:rgba(63,125,230,.08);border-left:3px solid #3f7de6;border-radius:0 8px 8px 0;padding:8px 10px;margin:9px 0 4px}
#bf-training .bft-quiz{margin:8px 0 4px;display:flex;flex-direction:column;gap:5px}
#bf-training .bft-quiz button{text-align:left;font-family:inherit;font-size:12px;font-weight:600;padding:7px 10px;border-radius:9px;border:1.5px solid #cbd5e1;background:rgba(255,255,255,.9);color:#334155;cursor:pointer}
#bf-training .bft-quiz button:hover{border-color:#3f7de6;background:#eff6ff}
#bf-training .bft-score{margin-top:11px;padding-top:9px;border-top:1px solid rgba(148,163,184,.28);display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:#334155}
#bf-training .bft-err{font-size:11px;color:#b91c1c;font-weight:700;margin-top:7px}
#bf-training .bft-targets{font-size:10.5px;color:#64748b;margin-top:8px;line-height:1.5}

/* Úspech */
#bf-training.bft-success{border-color:#77b848}
#bf-training .bft-done{text-align:center;padding:4px 0 2px;animation:bftPop .32s cubic-bezier(.2,.9,.3,1.3)}
#bf-training .bft-done .bft-tick{font-size:30px;line-height:1;color:#77b848}
#bf-training .bft-done .bft-dtitle{font-size:14px;font-weight:900;color:#0f172a;margin:5px 0 3px}
#bf-training .bft-done .bft-dsub{font-size:11.5px;color:#475569;line-height:1.5;margin-bottom:8px}
#bf-training .bft-done .bft-dpts{font-size:19px;font-weight:900;color:#3a7a14;margin-bottom:9px}
@keyframes bftPop{0%{transform:scale(.86);opacity:0}100%{transform:scale(1);opacity:1}}

/* Finále */
#bf-training .bft-final{text-align:center;padding:6px 0}
#bf-training .bft-final .bft-fem{font-size:30px}
#bf-training .bft-final .bft-ftitle{font-size:15px;font-weight:900;color:#0f172a;margin:6px 0 4px}
#bf-training .bft-final .bft-fstat{font-size:12px;color:#475569;line-height:1.7}
#bf-training .bft-recap{margin-top:10px;text-align:left;max-height:160px;overflow-y:auto;font-size:11px;color:#475569;line-height:1.7}

@media (max-width:640px){
  #bf-training{right:8px;bottom:8px;left:8px;width:auto}
}