/* Презентации: слайд (общий для окна у студентов и пульта), окно поверх страницы, пульт преподавателя.
   Всё под префиксами pz- (слайд и окно) и pc- (пульт), чтобы не задевать стили квестов. */

/* ---------- слайд 16:9; размеры — от ширины слайда (cqw) ---------- */
.pz-slide {
  --pz-accent: #3dff7a; --pz-bg: #050b07; --pz-text: #e6f3ea; --pz-dim: #8fb19a; --pz-line: rgba(143, 177, 154, .22);
  position: relative; box-sizing: border-box; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden;
  border-radius: 10px; text-align: left;
  /* клетка 4 % ширины: по высоте это 4 / 56,25 */
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pz-accent) 9%, transparent), transparent 55%),
    linear-gradient(rgba(143, 177, 154, .045) 1px, transparent 1px) 0 0 / 4% 7.111%,
    linear-gradient(90deg, rgba(143, 177, 154, .045) 1px, transparent 1px) 0 0 / 4% 7.111%,
    var(--pz-bg);
  box-shadow: inset 0 0 0 1px var(--pz-line);
}
/* cqw считаются от ближайшего контейнера-предка, поэтому поля и шрифт — у внутреннего блока */
.pz-in {
  position: absolute; inset: 0; z-index: 1; padding: 5cqw 6.2cqw 4.5cqw;
  color: var(--pz-text); font: 400 2.1cqw/1.45 "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.pz-slide *, .pz-slide *::before, .pz-slide *::after { box-sizing: border-box; }
/* стили страницы под окном (заголовки, списки, код в квестах) не должны менять слайд */
.pz-in :where(h1, h2, h3, p, ul, ol, li, pre, figure, figcaption, b) { margin: 0; padding: 0; font-family: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; background: none; border: 0; }
.pz-slide b { color: #fff; font-weight: 700; }
.pz-slide code { font: .9em/1.3 "JetBrains Mono", "Cascadia Code", Consolas, monospace; padding: .1em .35em; border-radius: .25em; background: color-mix(in srgb, var(--pz-accent) 13%, transparent); color: color-mix(in srgb, var(--pz-accent) 70%, #fff); }
.pz-body { height: 100%; display: flex; flex-direction: column; gap: 2cqw; }
.pz-body > * { margin: 0; }
.pz-slide h2 { margin: 0; font-size: 4cqw; line-height: 1.12; font-weight: 750; letter-spacing: -.01em; color: #fff; }
.pz-slide h2::before { content: ""; display: block; width: 5cqw; height: .45cqw; margin-bottom: 1.6cqw; border-radius: 1cqw; background: var(--pz-accent); box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--pz-accent) 60%, transparent); }
.pz-lead { font-size: 2.55cqw; color: var(--pz-dim); max-width: 85%; }
.pz-text { font-size: 2.5cqw; }
.pz-kicker { margin: 0 0 1.4cqw; font: 600 1.55cqw/1.2 "JetBrains Mono", Consolas, monospace; letter-spacing: .22em; text-transform: uppercase; color: var(--pz-accent); }
/* титульный */
.pz-cover { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.pz-cover h1 { margin: 0 0 2cqw; font-size: 6.4cqw; line-height: 1.04; font-weight: 800; letter-spacing: -.02em; color: #fff; max-width: 88%; }
.pz-cover .pz-lead { font-size: 2.6cqw; }
.pz-slide.is-cover::after { content: ""; position: absolute; z-index: 0; right: -8cqw; bottom: -14cqw; width: 46cqw; aspect-ratio: 1; border-radius: 50%; border: .4cqw solid color-mix(in srgb, var(--pz-accent) 35%, transparent); box-shadow: 0 0 0 4cqw color-mix(in srgb, var(--pz-accent) 5%, transparent), 0 0 0 8cqw color-mix(in srgb, var(--pz-accent) 3%, transparent); pointer-events: none; }
/* список и шаги */
.pz-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.5cqw; font-size: 2.6cqw; }
.pz-bullets li { position: relative; padding-left: 2.6cqw; }
.pz-bullets li::before { content: ""; position: absolute; left: .2cqw; top: .62em; width: 1cqw; height: 1cqw; border-radius: .2cqw; background: var(--pz-accent); transform: rotate(45deg); }
.pz-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.5cqw; font-size: 2.6cqw; }
.pz-steps li { display: flex; align-items: flex-start; gap: 1.6cqw; }
.pz-steps i { flex: none; width: 3.8cqw; height: 3.8cqw; display: grid; place-items: center; border-radius: 50%; border: .25cqw solid var(--pz-accent); color: var(--pz-accent); font: 700 1.7cqw/1 "JetBrains Mono", Consolas, monospace; font-style: normal; margin-top: -.2cqw; }
/* цепочка */
.pz-flow { display: flex; align-items: stretch; gap: 1.2cqw; margin-top: auto; margin-bottom: auto; }
.pz-flow-item { flex: 1 1 0; display: grid; place-items: center; text-align: center; padding: 2cqw 1.4cqw; border: .2cqw solid var(--pz-line); border-radius: 1cqw; background: rgba(255, 255, 255, .035); font-size: 2.3cqw; font-weight: 600; }
.pz-flow-arrow { flex: none; align-self: center; color: var(--pz-accent); font-size: 3.2cqw; font-weight: 700; }
/* карточки */
.pz-cards { display: grid; gap: 1.8cqw; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.pz-cards.n1 { --n: 1; } .pz-cards.n2 { --n: 2; } .pz-cards.n3 { --n: 3; } .pz-cards.n4 { --n: 4; }
.pz-card { padding: 2.2cqw 2.2cqw 2cqw; border: .2cqw solid var(--pz-line); border-radius: 1.2cqw; background: rgba(255, 255, 255, .035); }
.pz-card-icon { font-size: 3.6cqw; line-height: 1; margin-bottom: 1.3cqw; }
.pz-card b { display: block; font-size: 2.55cqw; margin-bottom: .8cqw; color: #fff; }
.pz-card p { margin: 0; font-size: 2cqw; color: var(--pz-dim); line-height: 1.4; }
/* код */
.pz-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 3cqw; align-items: start; }
.pz-code { margin: 0; padding: 1.8cqw 2.2cqw; border-radius: 1cqw; background: #020503; border: .15cqw solid var(--pz-line); font: 1.95cqw/1.55 "JetBrains Mono", "Cascadia Code", Consolas, monospace; color: #d7eedd; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.pz-code code { all: unset; white-space: inherit; }
.pz-t { color: #7ee2a8; } .pz-a { color: #9fd3ff; } .pz-s { color: #ffd166; } .pz-c { color: #5f8a6a; font-style: italic; } .pz-k { color: #c3a6ff; } .pz-n { color: #ffb86b; }
/* картинка */
.pz-figure { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.pz-figure img { flex: 1; min-height: 0; max-width: 100%; object-fit: contain; border-radius: .8cqw; }
.pz-figure figcaption { font-size: 1.6cqw; color: var(--pz-dim); }
.pz-num { position: absolute; z-index: 1; right: 2.4cqw; bottom: 1.8cqw; font: 1.2cqw/1 "JetBrains Mono", Consolas, monospace; color: var(--pz-dim); opacity: .7; }
.pz-slide.enter { animation: pz-enter .28s ease-out; }
@keyframes pz-enter { from { opacity: .35; transform: translateX(1.2%); } }

/* ---------- окно у студентов: почти на весь экран, поверх всего ---------- */
.pz-ov, .pz-ov *, .pz-mini, .pz-mini *, .pz-menu, .pz-menu * { box-sizing: border-box; }
.pz-ov { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; gap: 1.2vh; padding: 1.6vh 1.8vw 2vh; background: rgba(1, 3, 2, .88); backdrop-filter: blur(4px); font: 14px/1.4 "JetBrains Mono", ui-monospace, Consolas, monospace; color: #c7f5d2; animation: pz-fade .2s ease-out; }
@keyframes pz-fade { from { opacity: 0; } }
.pz-ov.hidden, .pz-mini.hidden, .pz-menu.hidden { display: none !important; }
.pz-bar { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
.pz-bar-title { min-width: 0; display: flex; align-items: baseline; gap: 12px; flex: 1; }
.pz-bar-title b { color: #3dff7a; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-bar-title span { color: #6f9c7b; font-size: 13px; white-space: nowrap; }
.pz-live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid #1f5235; border-radius: 99px; color: #9fd8b0; font-size: 12px; white-space: nowrap; }
.pz-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5c6c; box-shadow: 0 0 8px #ff5c6c; animation: pz-blink 1.4s ease-in-out infinite; }
@keyframes pz-blink { 50% { opacity: .35; } }
.pz-btn { flex: none; border: 1px solid #1f5235; border-radius: 8px; background: #06110b; color: #c7f5d2; font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.pz-btn:hover:not(:disabled) { border-color: #3dff7a; color: #3dff7a; }
.pz-btn:disabled { opacity: .35; cursor: default; }
.pz-btn.accent { border-color: #3dff7a; color: #021006; background: #3dff7a; font-weight: 700; }
.pz-stage { flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; }
.pz-stage > .pz-slide { width: min(100cqw, 100cqh * 16 / 9); box-shadow: inset 0 0 0 1px var(--pz-line), 0 30px 80px rgba(0, 0, 0, .7); }
.pz-hint { flex: none; text-align: center; color: #4f7a5d; font-size: 12px; }
@media (max-width: 700px) { .pz-bar-title span, .pz-hint { display: none; } .pz-btn { padding: 6px 9px; } }

/* свёрнутый показ — мини-окно со слайдом: перетаскивается за полоску, ширина — за правый нижний угол */
.pz-mini { position: fixed; left: 18px; bottom: 18px; top: auto; z-index: 2000; width: 320px; min-width: 220px; max-width: 70vw; resize: horizontal; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid #2d7a4f; border-radius: 12px; background: #06110b; box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 18px rgba(61, 255, 122, .16); font: 12px/1.2 "JetBrains Mono", ui-monospace, Consolas, monospace; color: #c7f5d2; animation: pz-fade .2s ease-out; }
.pz-mini.drag { opacity: .92; box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 24px rgba(61, 255, 122, .3); }
.pz-mini-bar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; cursor: grab; user-select: none; touch-action: none; }
.pz-mini.drag .pz-mini-bar { cursor: grabbing; }
.pz-mini-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff5c6c; box-shadow: 0 0 8px #ff5c6c; animation: pz-blink 1.4s ease-in-out infinite; }
.pz-mini-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3dff7a; }
.pz-mini-pos { flex: none; color: #6f9c7b; }
.pz-mini-open { flex: none; width: 24px; height: 24px; border: 1px solid #1f5235; border-radius: 6px; background: none; color: #c7f5d2; font-size: 13px; line-height: 1; cursor: pointer; }
.pz-mini-open:hover { border-color: #3dff7a; color: #3dff7a; }
.pz-mini-stage { margin: 0 6px 6px; cursor: zoom-in; }
.pz-mini-stage > .pz-slide { width: 100%; border-radius: 7px; pointer-events: none; }

/* кнопка «i» в шапке (слева от мессенджера) и список презентаций страницы */
.pz-info-wrap { position: relative; display: inline-flex; flex: none; }
.pz-info .pz-i { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.6px solid currentColor; border-radius: 50%; font: italic 700 12px/1 Georgia, "Times New Roman", serif; }
.pz-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1500; width: min(380px, calc(100vw - 24px)); padding: 6px; border: 1px solid #30363d; border-radius: 12px; background: #161b22; color: #e6edf3; box-shadow: 0 18px 44px rgba(1, 4, 9, .8); font: 14px/1.4 Inter, system-ui, "Segoe UI", sans-serif; text-align: left; text-transform: none; letter-spacing: normal; }
.pz-menu-h { padding: 6px 10px 8px; color: #8b949e; font-size: 12px; font-weight: 600; }
.pz-mi { display: flex; align-items: stretch; gap: 6px; }
.pz-mi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pz-mi-main:hover { background: #21262d; }
.pz-mi-main b { font-weight: 650; }
.pz-mi-main small { color: #8b949e; font-size: 12.5px; }
.pz-mi-show { flex: none; align-self: center; padding: 6px 10px; border: 1px solid #238636; border-radius: 8px; background: rgba(35, 134, 54, .15); color: #56d364; font: 600 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.pz-mi-show:hover { background: #238636; color: #fff; }

/* ---------- пульт преподавателя (/present) ---------- */
.pc-app:not(.hidden) { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; }
.pc-list { display: flex; flex-direction: column; gap: 8px; }
.pc-item { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.pc-item:hover { border-color: var(--line-2); }
.pc-item.active { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--panel)); }
.pc-item.live { box-shadow: inset 3px 0 0 #f87171; }
.pc-for { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-for i { padding: 1px 8px; border-radius: 99px; background: var(--surface-2, rgba(255, 255, 255, .06)); color: var(--dim); font-size: 11.5px; font-style: normal; }
.pc-item b { font-size: 14px; }
.pc-item span { color: var(--dim); font-size: 12px; }
.pc-item p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.pc-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-top h1 { font-size: 21px; font-weight: 700; color: var(--text); margin: 0 auto 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-top .hb-btn { margin-top: 0; }
.pc-top .hb-btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.pc-state { color: var(--dim); font-size: 13px; }
.pc-state b { color: var(--text); }
.pc-state.live b.on { color: #ff8a95; }
.pc-check { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 13px; cursor: pointer; }
.pc-check input { accent-color: var(--green); }
.pc-stage { position: relative; min-height: 0; container-type: size; display: grid; place-items: center; background: #05080d; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pc-stage > .pz-slide { width: min(100cqw, 100cqh * 16 / 9); }
.pc-stage:fullscreen { border: 0; background: #000; }
.pc-stage:fullscreen > .pz-slide { border-radius: 0; }
.pc-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-nav .hb-small-btn { padding: 6px 14px; font-size: 14px; }
.pc-pos { font-weight: 700; min-width: 70px; text-align: center; }
.pc-hint { color: var(--dim); font-size: 12px; margin-left: auto; }
.pc-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.pc-thumb { flex: none; width: 150px; padding: 0; border: 2px solid transparent; border-radius: 9px; background: none; cursor: pointer; position: relative; overflow: hidden; }
.pc-thumb .pz-slide { width: 100%; border-radius: 3px; pointer-events: none; }
.pc-thumb .pz-slide .pz-num { display: none; }
.pc-thumb:hover { border-color: var(--line-2); }
.pc-thumb.current { border-color: var(--green); }
.pc-thumb.shown::after { content: "в эфире"; position: absolute; left: 4px; top: 4px; padding: 1px 7px; border-radius: 99px; background: #ef4444; color: #fff; font: 700 10px/1.5 Inter, system-ui, sans-serif; }
.pc-notes { padding: 8px 14px; border-radius: 10px; background: rgba(251, 191, 36, .08); box-shadow: inset 3px 0 0 var(--warn); color: var(--text); font-size: 13.5px; }
.pc-notes:empty { display: none; }
.pc-empty { color: var(--dim); padding: 30px 4px; }
@media (min-width: 1000px) and (min-height: 500px) {
  .pc-app:not(.hidden) { flex: 1; min-height: 0; }
  .pc-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 2px; }
  .pc-main { min-height: 0; }
  .pc-main > * { flex: none; }
  .pc-main > .pc-stage { flex: 1 1 0; }
  .pc-notes { max-height: 5.2em; overflow: auto; }
}
@media (max-width: 999px), (max-height: 499px) {
  .pc-app:not(.hidden) { grid-template-columns: 1fr; }
  .pc-stage { aspect-ratio: 16 / 9; }
}