/* SpeShu: окно учительских страниц (.spx-*) и карточка фото-инструментов (.spx2-*), 4 воронки, 22.09.2026 */
/* 22.09 вечер, владелец: «уменьшай». Окно больше не на весь экран и без затемнения, страница под ним кликается.
   Экран от 1280: карточка 248 px справа под шапкой, в поле за колонкой текста. Уже 1280: полоса сверху поверх шапки. */
.spx-ov{position:fixed;top:73px;right:12px;z-index:2147482000;pointer-events:none}
.spx-ov[hidden]{display:none}
.spx-card{position:relative;width:248px;max-height:calc(100vh - 205px);overflow:auto;border-radius:14px;background:#164d3d;box-shadow:0 12px 32px rgba(0,0,0,.3);pointer-events:auto;animation:spxIn .3s ease-out}
@keyframes spxIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.spx-x{position:absolute;top:6px;right:6px;z-index:2;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font:700 16px/24px Arial,sans-serif;cursor:pointer}
.spx-x:hover{background:rgba(0,0,0,.7)}
.spx-link{display:block;color:#fff;text-decoration:none}
.spx-img{display:block;width:100%;height:112px;object-fit:cover;object-position:center 22%}
.spx-int .spx-img,a.spx-link .spx-p,.spx-prev{display:none}
.spx-body{display:flex;flex-direction:column;gap:7px;padding:12px 14px;background:linear-gradient(160deg,#1c5c48 0%,#164d3d 55%,#0f3a2e 100%)}
.spx-int .spx-body{padding-right:36px}
.spx-kicker{font:700 10px/1.2 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#f2cb77}
.spx-h{font:700 17px/1.2 Georgia,"Times New Roman",serif;color:#fff}
.spx-p{font:13px/1.4 Inter,system-ui,sans-serif;color:#dceade;margin:0}
.spx-btn{display:flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;border-radius:8px;background:#f2cb77;color:#18372e;font:700 14px/1.2 Inter,system-ui,sans-serif;text-align:center;transition:background .15s}
.spx-link:hover .spx-btn,a.spx-btn:hover{background:#f7d992}
.spx-note{font:10px/1.3 Inter,system-ui,sans-serif;color:#9fb8a6}
.spx-chips{display:flex;flex-wrap:wrap;gap:6px}
.spx-chips button{padding:7px 12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:#fff;font:500 13px/1.2 Inter,system-ui,sans-serif;cursor:pointer;transition:background .15s,border-color .15s}
.spx-chips button:hover{border-color:#f2cb77}
.spx-chips button.on{background:#f2cb77;border-color:#f2cb77;color:#18372e;font-weight:700}
.spx-card{transition:opacity .15s,visibility .15s}.spx-away .spx-card{opacity:0;visibility:hidden;pointer-events:none}
.spx-card .spx-chips{gap:5px}
.spx-card .spx-chips button{padding:5px 9px;font-size:12px}
@media(max-width:1279px){.spx-ov{top:calc(env(safe-area-inset-top,0px) + 6px);left:0;right:auto;width:100vw;padding:0 8px;box-sizing:border-box}.spx-card{width:auto;max-width:560px;margin:0 auto;max-height:min(46vh,330px);border-radius:12px}a.spx-link{display:grid;grid-template-columns:76px minmax(0,1fr)}a.spx-link .spx-img{height:100%;min-height:96px}.spx-body{padding:10px 36px 10px 12px;gap:6px}.spx-h{font-size:16px}.spx-card .spx-chips:not(.spx-quiz){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.spx-card .spx-chips::-webkit-scrollbar{display:none}.spx-card .spx-chips button{flex:none}}

.spx2{margin:22px 0;padding:0;border-radius:16px;overflow:hidden;background:#1b2733;color:#fff;box-shadow:0 10px 30px rgba(27,39,51,.25)}
#spxCard[hidden]{display:none}
.spx2-link{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:stretch;color:#fff;text-decoration:none}
.spx2-img{display:block;width:100%;height:100%;min-height:220px;object-fit:cover}
.spx2-body{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px 24px;background:linear-gradient(135deg,#243547 0%,#1b2733 60%,#16202b 100%)}
.spx2-kicker{font:700 12px/1.2 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#5ee7ff}
.spx2-h{font:700 22px/1.2 Inter,system-ui,sans-serif;color:#fff}
.spx2-p{font:14px/1.45 Inter,system-ui,sans-serif;color:#c7d3de}
.spx2-btn{display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;min-height:44px;margin-top:4px;padding:11px 20px;border-radius:9px;background:#5ee7ff;color:#0b1a24;font:700 15px/1.2 Inter,system-ui,sans-serif;box-shadow:0 6px 18px rgba(94,231,255,.3);transition:transform .15s,background .15s;text-align:center}
.spx2-link:hover .spx2-btn,a.spx2-btn:hover{background:#8ff0ff;transform:translateY(-1px)}
.spx2-note{display:block;padding:6px 24px 10px;font:11px/1.3 Inter,system-ui,sans-serif;color:#8a9aa8;background:#16202b}
.spx2-chips button{border-color:rgba(255,255,255,.3)}
.spx2-chips button.on{background:#5ee7ff;border-color:#5ee7ff;color:#0b1a24}
.spx2-chips button:hover{border-color:#5ee7ff}
.spx2-ba{position:relative;overflow:hidden;min-height:275px;background:#000;user-select:none;-webkit-user-select:none}
.spx2-ba img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.spx2-ba-after{position:absolute;inset:0}
.spx2-ba-before{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.spx2-ba-before img{width:100%;height:100%}
.spx2-ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.6);pointer-events:none}
.spx2-ba-handle:after{content:"⇔";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#5ee7ff;color:#0b1a24;font:700 18px/34px Arial,sans-serif;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.spx2-ba-lbl{position:absolute;top:8px;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font:700 11px/1.2 Inter,system-ui,sans-serif;pointer-events:none}
.spx2-ba-lbl.l{left:8px}.spx2-ba-lbl.r{right:8px}
.spx2-ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
@media(max-width:640px){.spx2-link{grid-template-columns:96px minmax(0,1fr)}.spx2-int{grid-template-columns:1fr}.spx2-img{min-height:0}.spx2-ba{min-height:0;height:260px}.spx2-body{padding:14px 14px 12px;gap:6px}.spx2-h{font-size:17px}.spx2-p{font-size:13px}.spx2-btn{width:100%;font-size:14px}.spx2-note{padding:6px 14px 8px}}
.spx-link,.spx-link:hover,.spx-link *,.spx2-link,.spx2-link:hover,.spx2-link *{text-decoration:none!important}
.spx-card [hidden],.spx2 [hidden]{display:none!important}