/* ============================================================================
 * Szkoła AI — TRYB DEMO playera (consent → login → lock → finał → logout)
 * ----------------------------------------------------------------------------
 * Aktywne TYLKO gdy ?demo=1 ORAZ SHOOL_FX.demo (kontroler: js/kurs-demo.js).
 * Tokeny spójne z kurs.css: tło var(--sa-bg,#070a0f), akcent var(--sa-acc,#34e2a0), mono JetBrains.
 * Bez ?demo=1 ten arkusz nic nie robi (żadna klasa nie jest dodawana do DOM).
 * ========================================================================== */

:root {
  --demo-bg: var(--sa-bg,#070a0f);
  --demo-accent: var(--sa-acc,#34e2a0);
  --demo-text: var(--sa-txt,#e8eaf0);
  --demo-dim: var(--sa-muted,#8b96a8);
  --demo-line: var(--sa-surface2,#1e2940);
  --demo-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------- pełnoekranowe nakładki (consent / login / finał) ---------------- */
.demo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 120% at 50% 0%, #0d1320 0%, var(--demo-bg) 70%);
  color: var(--demo-text);
  font-family: var(--demo-mono);
  -webkit-font-smoothing: antialiased;
}
.demo-overlay[hidden] { display: none; }

.demo-window {
  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--sa-bg2,#0b1018);
  border: 1px solid var(--demo-line);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--sa-acc-rgb,52,226,160), 0.08);
}

.demo-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--demo-line);
  background: var(--sa-surface,#0e141e);
  font-size: 13px;
  color: var(--demo-dim);
}
.demo-titlebar .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #3a4456;
}
.demo-titlebar .dot.r { background: #ff5f56; }
.demo-titlebar .dot.y { background: #ffbd2e; }
.demo-titlebar .dot.g { background: #27c93f; }
.demo-titlebar .ttl { margin-left: 8px; }

.demo-body { padding: 26px 28px 30px; }

.demo-warn {
  display: inline-block;
  color: var(--demo-accent);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 18px;
  margin-bottom: 14px;
}
.demo-lead {
  color: var(--demo-text);
  line-height: 1.65;
  font-size: 15px;
  margin-bottom: 22px;
}
.demo-lead .soft { color: var(--demo-dim); }

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.demo-btn {
  font-family: var(--demo-mono);
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid var(--demo-accent);
  background: var(--demo-accent);
  color: var(--sa-surface,#111826);
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.demo-btn:hover { box-shadow: 0 0 28px rgba(var(--sa-acc-rgb,52,226,160), 0.4); transform: translateY(-1px); }
.demo-btn:focus-visible { outline: 2px solid var(--sa-acc-tint,#a7f3d6); outline-offset: 2px; }

.demo-btn.ghost {
  background: transparent;
  color: var(--demo-text);
  border-color: var(--demo-line);
  font-weight: 500;
}
.demo-btn.ghost:hover { border-color: var(--demo-accent); color: var(--demo-accent); box-shadow: none; }

/* ---------------- login (PuTTY) ---------------- */
.demo-term {
  font-family: var(--demo-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--demo-text);
  white-space: pre-wrap;
  min-height: 160px;
}
.demo-term .ln-dim { color: var(--demo-dim); }
.demo-term .ln-ok { color: #27c93f; }
.demo-term .ln-accent { color: var(--demo-accent); }
.demo-cursor {
  display: inline-block;
  width: 9px; height: 1.05em;
  background: var(--demo-accent);
  vertical-align: text-bottom;
  animation: demoBlink 1s steps(2) infinite;
}
@keyframes demoBlink { 50% { opacity: 0; } }

/* ---------------- górny pasek DEMO (stały) ---------------- */
.demo-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #1a0f04, #0e0a05);
  border-bottom: 1px solid rgba(var(--sa-acc-rgb,52,226,160), 0.45);
  font-family: var(--demo-mono);
  font-size: 13px;
  color: var(--demo-accent);
}
.demo-topbar .demo-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--demo-accent);
  box-shadow: 0 0 10px var(--demo-accent);
  animation: demoPulse 1.6s ease-in-out infinite;
}
@keyframes demoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.demo-topbar .demo-label { font-weight: 700; letter-spacing: .4px; }
.demo-topbar .demo-spacer { flex: 1 1 auto; }
.demo-topbar .demo-finbtn {
  font-family: var(--demo-mono);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--demo-accent);
  background: transparent;
  color: var(--demo-accent);
  cursor: pointer;
  white-space: nowrap;
}
.demo-topbar .demo-finbtn:hover { background: var(--demo-accent); color: var(--sa-surface,#111826); }

/* gdy demo aktywne: zsuń całą stronę w dół, by pasek nie zasłaniał topbara playera */
body.demo-active { padding-top: 38px; }

/* ---------------- locki modułów w sidebarze ---------------- */
.module-link.demo-locked {
  opacity: 0.45;
  filter: grayscale(0.5);
  cursor: not-allowed;
  position: relative;
}
.module-link.demo-locked:hover { opacity: 0.62; }
.module-link.demo-locked .m-lock {
  margin-left: auto;
  font-size: 13px;
  opacity: 0.9;
}
.module-link.demo-locked .m-done { display: none; }

/* ---------------- nakładka „moduł zablokowany" (toast) ---------------- */
.demo-locktoast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: 8600;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--sa-surface,#111826);
  border: 1px solid rgba(var(--sa-acc-rgb,52,226,160), 0.5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--demo-mono);
  font-size: 14px;
  color: var(--demo-text);
  max-width: calc(100vw - 32px);
}
.demo-locktoast .lt-buy {
  font-family: var(--demo-mono);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--demo-accent);
  background: var(--demo-accent);
  color: var(--sa-surface,#111826);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.demo-locktoast .lt-buy:hover { box-shadow: 0 0 22px rgba(var(--sa-acc-rgb,52,226,160), 0.5); }

/* ---------------- STAŁY przycisk „Wróć do koszyka" (dół-środek) ---------------- */
.demo-backbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 8700;
}
.demo-backbar .demo-backbtn {
  font-family: var(--demo-mono);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid var(--demo-accent);
  background: rgba(17, 22, 31, 0.92);
  color: var(--demo-accent);
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--sa-acc-rgb,52,226,160), 0.18);
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.demo-backbar .demo-backbtn:hover {
  background: var(--demo-accent);
  color: var(--sa-surface,#111826);
  transform: translateY(-1px);
}
.demo-backbar .demo-backbtn:focus-visible { outline: 2px solid var(--sa-acc-tint,#a7f3d6); outline-offset: 3px; }

/* ---------------- finał: certyfikat (auto-scroll) ---------------- */
.demo-finale .demo-window {
  width: min(900px, 100%);
}
.demo-cert {
  background: var(--demo-bg);
  border: 2px solid var(--demo-accent);
  border-radius: 8px;
  padding: 40px 44px;
  margin: 8px 0 18px;
  position: relative;
}
.demo-cert .cert-inner { border: 1px solid var(--demo-line); padding: 30px 26px; text-align: center; }
.demo-cert .cert-head {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--demo-dim); font-size: 12px; margin-bottom: 26px;
}
.demo-cert .cert-head .brand { color: var(--demo-accent); font-size: 14px; }
.demo-cert .cert-title {
  color: var(--demo-text); font-size: clamp(22px, 4vw, 34px);
  font-weight: 700; letter-spacing: 1px; margin-bottom: 8px;
}
.demo-cert .cert-course { color: var(--demo-accent); font-size: 15px; margin-bottom: 22px; }
.demo-cert .cert-rule { height: 1px; background: var(--demo-accent); opacity: .6; margin: 16px auto; width: 60%; }
.demo-cert .cert-sub { color: var(--demo-dim); font-size: 13px; }
.demo-cert .cert-name {
  color: var(--demo-text); font-size: clamp(20px, 3.5vw, 28px);
  font-weight: 700; margin: 10px 0 18px;
}
.demo-cert .cert-detail { color: var(--demo-text); font-size: 14px; margin-bottom: 6px; }
.demo-cert .cert-stamp { color: var(--demo-accent); font-weight: 700; font-size: 16px; margin: 18px 0 6px; }
.demo-cert .cert-foot { color: var(--demo-dim); font-size: 11px; margin-top: 22px; }
.demo-cert .cert-badge-preview {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--demo-accent);
  color: var(--sa-surface,#111826);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: 5px;
  transform: rotate(6deg);
}
.demo-finale-msg {
  text-align: center;
  color: var(--demo-text);
  font-size: 17px;
  margin: 8px 0;
}
.demo-finale-sub { text-align: center; color: var(--demo-dim); font-size: 13px; }

/* reduced-motion: bez migotania kursora */
@media (prefers-reduced-motion: reduce) {
  .demo-cursor { animation: none; }
  .demo-topbar .demo-pulse { animation: none; }
}