@charset "utf-8";
/* PROWID — раздел «Necə işləyir?» (index.php?id=video), подключается только на этой странице */

/* ---------- Hero ---------- */
.video-hero-wrap{
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.video-hero-wrap::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(640px 380px at 90% -10%, rgba(37,99,235,.42), transparent 62%),
    radial-gradient(520px 320px at -6% 120%, rgba(79,70,229,.32), transparent 62%);
  pointer-events:none;
}
.video-hero{position:relative; padding-block:clamp(40px,6vw,72px)}
.video-hero h1{color:#fff; font-size:clamp(2rem,4vw,2.9rem); font-weight:900; margin-bottom:.8rem; max-width:820px}
.video-hero-sub{color:#B9C6E4; font-size:1.05rem; max-width:44rem; margin:0 0 1.8rem}
.video-hero-stats{display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.6rem)}
.video-hero-stats li{display:flex; flex-direction:column; gap:.1rem}
.video-hero-stats strong{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:900; color:var(--amber-light); line-height:1.2}
.video-hero-stats span{color:#8FA3CC; font-size:.9rem}
.video-notfound{margin-top:1.4rem; padding:.9rem 1.2rem; border-radius:12px; background:#FEF2F2; color:#991B1B; font-weight:600}

/* ---------- Toolbar ---------- */
.video-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.4rem;
  align-items:center;
  justify-content:space-between;
  margin-top:clamp(28px,4vw,44px);
}
.video-langs{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.3rem;
}
.lang-tab{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border:0;
  background:none;
  padding:.5rem 1rem;
  border-radius:999px;
  font:inherit;
  font-size:.92rem;
  font-weight:700;
  color:var(--slate);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.lang-tab:hover{color:var(--primary-dark)}
.lang-tab.active{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.lang-count,
.tag-count{
  font-size:.74rem;
  font-weight:700;
  color:var(--muted);
  background:rgba(15,23,42,.06);
  border-radius:999px;
  padding:.05rem .45rem;
}
.lang-tab.active .lang-count{background:rgba(37,99,235,.1); color:var(--primary-dark)}
.lang-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0; display:inline-block}
.lang-dot.lang-js{background:#F7DF1E; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.lang-dot.lang-py{background:linear-gradient(135deg,#3776AB 50%,#FFD43B 50%)}
.lang-dot.lang-php{background:#777BB4}
.lang-badge{
  display:inline-flex;
  align-items:center;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  padding:.18rem .55rem;
  border-radius:6px;
  line-height:1.4;
}
.lang-badge.lang-js{background:#F7DF1E; color:#1F1A00}
.lang-badge.lang-py{background:#3776AB; color:#fff}
.lang-badge.lang-php{background:#777BB4; color:#fff}

.video-search{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:var(--soft);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:.6rem 1.1rem;
  flex:1 1 280px;
  max-width:400px;
  cursor:text;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.video-search:focus-within{border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.video-search svg{width:18px; height:18px; color:var(--muted); flex-shrink:0}
.video-search input{border:0; background:none; outline:none; font:inherit; color:var(--ink); width:100%; min-width:0}

.video-tags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem}
.tag-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border:1px solid var(--line);
  background:#fff;
  color:var(--slate);
  padding:.4rem .95rem;
  border-radius:999px;
  font:inherit;
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.tag-chip:hover{border-color:rgba(37,99,235,.4); color:var(--primary-dark)}
.tag-chip.active{background:var(--grad); border-color:transparent; color:#fff}
.tag-chip.active .tag-count{background:rgba(255,255,255,.22); color:#fff}
.tag-chip[hidden]{display:none}
.video-count{margin:1.1rem auto 0; color:var(--muted); font-size:.9rem}
.video-count b{color:var(--ink)}

/* ---------- Grid / cards ---------- */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.3rem;
  margin-top:1rem;
}
.video-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  color:inherit;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.video-card[hidden]{display:none}
.video-card:hover,
.video-card:focus-visible{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(37,99,235,.35); color:inherit}
.video-card:focus-visible{outline:3px solid rgba(37,99,235,.35); outline-offset:2px}
.video-thumb{
  position:relative;
  height:118px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-soft);
  color:var(--primary);
}
.video-thumb > svg{width:46px; height:46px; transition:transform .3s ease}
.video-card:hover .video-thumb > svg{transform:scale(1.12) rotate(-4deg)}
.video-thumb .lang-badge{position:absolute; top:12px; left:12px}
.video-num{position:absolute; top:12px; right:14px; font-size:.78rem; font-weight:800; opacity:.6}
.play-badge{
  position:absolute;
  bottom:12px; right:12px;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(37,99,235,.35);
  transition:transform .2s ease;
}
.play-badge svg{width:15px; height:15px; margin-left:2px}
.video-card:hover .play-badge{transform:scale(1.12)}
.cat-basics{background:linear-gradient(135deg,#EEF2FF,#E0E7FF); color:#4F46E5}
.cat-conditions{background:linear-gradient(135deg,#FFFBEB,#FEF3C7); color:#D97706}
.cat-loops{background:linear-gradient(135deg,#EFF6FF,#DBEAFE); color:#2563EB}
.cat-functions{background:linear-gradient(135deg,#F5F3FF,#EDE9FE); color:#7C3AED}
.cat-arrays{background:linear-gradient(135deg,#F0FDFA,#CCFBF1); color:#0D9488}
.cat-objects{background:linear-gradient(135deg,#FDF2F8,#FCE7F3); color:#DB2777}
.cat-strings{background:linear-gradient(135deg,#F0FDF4,#DCFCE7); color:#16A34A}
.cat-oop{background:linear-gradient(135deg,#F0F9FF,#E0F2FE); color:#0284C7}
.cat-errors{background:linear-gradient(135deg,#FEF2F2,#FEE2E2); color:#DC2626}
.cat-async{background:linear-gradient(135deg,#ECFEFF,#CFFAFE); color:#0891B2}
.cat-algorithms{background:linear-gradient(135deg,#EEF2FF,#DDD6FE); color:#6D28D9}
.cat-search{background:linear-gradient(135deg,#ECFDF5,#D1FAE5); color:#047857}
.cat-sorting{background:linear-gradient(135deg,#FFF7ED,#FFEDD5); color:#C2410C}
.cat-structures{background:linear-gradient(135deg,#F0FDFA,#CCFBF1); color:#0F766E}
.cat-adt{background:linear-gradient(135deg,#FDF4FF,#F5D0FE); color:#A21CAF}
.video-card-body{padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.video-card-tag{
  align-self:flex-start;
  font-size:.76rem; font-weight:700;
  color:var(--primary-dark);
  background:rgba(37,99,235,.09);
  padding:.2rem .7rem;
  border-radius:999px;
}
.video-card-title{font-size:1.04rem; font-weight:700; line-height:1.35; color:var(--ink)}
.video-card-desc{color:var(--slate); font-size:.9rem; line-height:1.55}
.video-card-meta{color:var(--muted); font-size:.78rem; margin-top:auto; padding-top:.3rem}
.video-empty{display:none; text-align:center; color:var(--muted); padding:2.4rem 0}
.video-empty.is-visible{display:block}
.video-about{margin-top:clamp(48px,7vw,80px)}
.video-about h2{font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:900; text-align:center; margin-bottom:1.6rem}

/* ---------- Хаб каталога: боковая панель фильтров + вкладки ---------- */
.px-continue{display:inline-flex; align-items:center; gap:.6rem; max-width:100%; margin-top:1.6rem; padding:.55rem 1.1rem .55rem .55rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.08); color:#fff; transition:background .2s ease, transform .2s ease}
.px-continue:hover{background:rgba(255,255,255,.16); color:#fff; transform:translateY(-2px)}
.px-continue[hidden]{display:none}
.px-continue-play{width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--grad); box-shadow:0 8px 18px rgba(37,99,235,.35)}
.px-continue-play svg{width:14px; height:14px; margin-left:2px}
.px-continue small{color:#B9C6E4; font-size:.85rem; white-space:nowrap}
.px-continue strong{font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}

.px-hub{display:grid; grid-template-columns:minmax(0,272px) minmax(0,1fr); gap:clamp(1.2rem,2.6vw,2.2rem); align-items:start; margin-top:clamp(24px,3.5vw,40px)}
.px-side{position:sticky; top:90px; display:flex; flex-direction:column; gap:1.1rem; max-height:calc(100vh - 106px); overflow:auto; padding:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); scrollbar-width:thin; overscroll-behavior:contain}
.px-side .video-search{flex:none; max-width:none; padding:.55rem .9rem}
.px-side-block[hidden]{display:none}
.px-side-title{margin:0 0 .5rem; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.px-side .video-langs{display:grid; grid-template-columns:minmax(0,1fr); gap:.2rem; border-radius:14px}
.px-side .lang-tab{justify-content:flex-start; min-width:0; padding:.5rem .7rem; border-radius:10px; font-size:.88rem; white-space:nowrap}
.px-side .lang-tab .lang-count{margin-left:auto}
.px-topics{display:flex; flex-direction:column; gap:.15rem}
.px-topic{display:flex; align-items:center; gap:.6rem; width:100%; padding:.4rem .5rem; border:0; border-radius:11px; background:none; color:var(--slate); font:inherit; font-size:.88rem; font-weight:600; text-align:left; cursor:pointer; transition:background .18s ease, color .18s ease, box-shadow .18s ease}
.px-topic:hover{background:var(--soft); color:var(--ink)}
.px-topic.active{background:rgba(37,99,235,.08); color:var(--primary-dark); box-shadow:inset 3px 0 0 var(--primary)}
.px-topic.active .tag-count{background:rgba(37,99,235,.14); color:var(--primary-dark)}
.px-topic[hidden]{display:none}
.px-topic-ico{width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border-radius:8px; background:var(--soft); color:var(--slate)}
.px-topic-ico svg{width:16px; height:16px}
.px-topic-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.px-topic-done{color:#16A34A; font-size:.72rem; font-weight:800; white-space:nowrap}
.px-progress-num{margin:0 0 .45rem; color:var(--slate); font-size:.88rem}
.px-progress-num b{color:var(--ink); font-size:1.15rem}
.px-meter{height:6px; overflow:hidden; border-radius:999px; background:#E8EDF5}
.px-meter span{display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#16A34A,#22C55E); transition:width .35s ease}
.px-switch{display:flex; align-items:center; gap:.5rem; margin-top:.75rem; color:var(--slate); font-size:.86rem; font-weight:600; cursor:pointer}
.px-switch input{width:16px; height:16px; accent-color:var(--primary)}
.px-side-hint{margin:.5rem 0 0; color:var(--muted); font-size:.75rem; line-height:1.45}

.px-main{min-width:0}
.px-ctabs{display:flex; gap:.3rem; padding:.3rem; overflow-x:auto; background:var(--soft); border:1px solid var(--line); border-radius:16px; scrollbar-width:none}
.px-ctabs::-webkit-scrollbar{display:none}
.px-ctab{flex:1 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border:0; border-radius:12px; background:none; color:var(--slate); font:inherit; font-size:.95rem; font-weight:750; white-space:nowrap; cursor:pointer; transition:background .2s ease, color .2s ease, box-shadow .2s ease}
.px-ctab svg{width:18px; height:18px; flex:0 0 auto}
.px-ctab:hover{color:var(--primary-dark)}
.px-ctab.is-active{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.px-ctab.is-active svg{color:var(--primary)}
.px-ctab.is-active .lang-count{background:rgba(37,99,235,.1); color:var(--primary-dark)}
.px-ctab:focus-visible{outline:3px solid rgba(37,99,235,.35); outline-offset:1px}
.px-js-on .px-tabpanel:not(.is-active){display:none}
.px-tabpanel:focus{outline:none}
.px-tabpanel .px-trainers{margin-top:1.4rem}
.px-tabpanel .px-regex-studio{margin:1.2rem 0 0}

.px-filterbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; margin:1.1rem 0 .2rem; min-height:2rem}
.px-filterbar .video-count{margin:0}
.px-active{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem}
.px-achip{display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .5rem .28rem .75rem; border:1px solid rgba(37,99,235,.25); border-radius:999px; background:rgba(37,99,235,.06); color:var(--primary-dark); font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; transition:background .18s ease}
.px-achip:hover{background:rgba(37,99,235,.12)}
.px-achip span{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:rgba(37,99,235,.14); font-size:.9rem; line-height:1}
.px-areset{border:0; background:none; padding:.2rem .3rem; color:var(--muted); font:inherit; font-size:.8rem; font-weight:600; text-decoration:underline; cursor:pointer}
.px-areset:hover{color:var(--ink)}

.px-group{margin-top:1.5rem; scroll-margin-top:96px}
.px-group[hidden]{display:none}
.px-group + .px-group{padding-top:1.5rem; border-top:1px solid var(--line)}
.px-group-head{display:flex; align-items:center; gap:.7rem; margin-bottom:1rem}
.px-group-head h2{margin:0; font-size:clamp(1.1rem,2vw,1.3rem); font-weight:900}
.px-group-ico{width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:11px}
.px-group-ico svg{width:20px; height:20px}
.px-group-all{margin-left:auto; padding:.35rem .2rem; border:0; background:none; color:var(--primary); font:inherit; font-size:.88rem; font-weight:750; white-space:nowrap; cursor:pointer}
.px-group-all:hover{color:var(--primary-dark); text-decoration:underline}
.px-group-all[hidden]{display:none}
.px-group .video-grid{margin-top:0; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem}
.px-group-foot{text-align:center}
.px-group-foot .btn{margin-top:1.1rem}
.px-group-foot .btn[hidden]{display:none}
.px-js-on:not(.px-ready) .px-group .video-card:nth-child(n+7){display:none}
.video-card.is-done .video-thumb::after{content:'✓'; position:absolute; bottom:12px; left:12px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#16A34A; color:#fff; font-size:.78rem; font-weight:900; box-shadow:0 4px 10px rgba(22,163,74,.3)}
.video-card.is-done .play-badge{background:#fff; color:#16A34A; box-shadow:0 4px 12px rgba(15,23,42,.12)}

/* Список уроков темы на странице ролика */
.px-outline{padding:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm)}
.px-outline-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem}
.px-outline-head h2{margin:0; font-size:1rem; font-weight:900; line-height:1.3}
.px-outline-head h2 a{color:var(--ink)}
.px-outline-head h2 a:hover{color:var(--primary-dark)}
.px-outline-head small{color:var(--muted); font-size:.8rem; font-weight:600}
.px-outline .px-meter span{background:var(--grad)}
.px-outline-list{max-height:clamp(170px,32vh,300px); overflow:auto; margin:.8rem -.4rem 0; padding:0 .4rem; scrollbar-width:thin; overscroll-behavior:contain}
.px-outline-list a{position:relative; display:flex; align-items:baseline; gap:.6rem; padding:.42rem .5rem; border-radius:9px; color:var(--slate); font-size:.86rem; line-height:1.4; transition:background .18s ease, color .18s ease}
.px-outline-list a:hover{background:var(--soft); color:var(--ink)}
.px-outline-list a.is-current{background:rgba(37,99,235,.08); color:var(--primary-dark); font-weight:700; box-shadow:inset 3px 0 0 var(--primary)}
.px-outline-n{flex:0 0 auto; min-width:1.4rem; color:var(--muted); font:700 .74rem ui-monospace,Consolas,monospace}
.px-outline-list a.is-done .px-outline-n{color:#16A34A}
.px-outline-list a.is-done .px-outline-n::before{content:'✓ '}
.px-outline-t{min-width:0}

/* ---------- Языковые тренажёры ---------- */
.px-trainers{margin-top:clamp(42px,6vw,72px)}
.px-trainers-head{display:flex; justify-content:space-between; align-items:end; gap:1.5rem; margin-bottom:1.25rem}
.px-trainers-head h2{font-size:clamp(1.45rem,2.5vw,1.9rem); font-weight:900; margin:.65rem 0 .35rem}
.px-trainers-head p{max-width:58rem; color:var(--slate); margin:0; line-height:1.65}
.px-trainer-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:1rem; align-items:start}
.px-trainer-card{--trainer-accent:#4F46E5; --trainer-wash:#F5F3FF; background:linear-gradient(155deg,var(--trainer-wash),#fff 32%); border:1px solid var(--line); border-top:4px solid var(--trainer-accent); border-radius:var(--radius-lg); padding:1.1rem; box-shadow:var(--shadow-sm); min-width:0; transition:transform .2s ease,box-shadow .2s ease}
.px-trainer-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.px-trainer-card[data-lang="js"]{--trainer-accent:#B88700; --trainer-wash:#FFF9DF}
.px-trainer-card[data-lang="py"]{--trainer-accent:#2875B8; --trainer-wash:#EAF5FF}
.px-trainer-card[data-lang="php"]{--trainer-accent:#7067AB; --trainer-wash:#F1EFFF}
.px-trainer-card[hidden]{display:none}
.px-trainer-top{display:flex; align-items:center; gap:.55rem; margin-bottom:.8rem}
.px-trainer-icon{width:2.5rem; height:2.5rem; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; background:var(--trainer-accent); color:#fff; font:800 1.1rem/1 ui-monospace,Consolas,monospace; box-shadow:0 5px 12px color-mix(in srgb,var(--trainer-accent) 24%,transparent)}
.px-trainer-level{font-size:.72rem; font-weight:750; color:var(--trainer-accent); background:rgba(255,255,255,.8); border:1px solid color-mix(in srgb,var(--trainer-accent) 20%,transparent); border-radius:999px; padding:.25rem .55rem}
.px-trainer-skill{font-size:.72rem; color:var(--muted); font-family:ui-monospace,Consolas,monospace; margin-left:auto}
.px-trainer-card h3{font-size:1.08rem; line-height:1.35; margin:0 0 .5rem; color:var(--ink)}
.px-trainer-task{color:var(--slate); line-height:1.6; font-size:.92rem; min-height:4.4em}
.px-trainer-task code,.px-trainer-explain code{font-family:ui-monospace,Consolas,monospace; background:#F1F5F9; border-radius:4px; padding:.08rem .25rem; color:#334155}
.px-trainer-label{display:block; margin-top:.7rem}
.px-trainer-label>span{display:block; font-size:.78rem; font-weight:750; color:var(--slate); margin-bottom:.35rem}
.px-trainer-editor{display:block; width:100%; min-height:150px; resize:vertical; border:1px solid #26334F; border-radius:10px; padding:.8rem; background:#0B1226; color:#E2E8F0; font: .82rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:4; white-space:pre; overflow:auto}
.px-trainer-editor:focus{outline:3px solid rgba(37,99,235,.22); border-color:var(--primary)}
.px-trainer-actions{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.65rem}
.px-trainer-result{font-size:.78rem; line-height:1.45; color:var(--muted); margin:.65rem 0 .35rem}
.px-trainer-result.is-success{color:#15803D; font-weight:750}
.px-trainer-result.is-incomplete{color:#B45309}
.px-trainer-progress{height:6px; overflow:hidden; background:#E8EDF5; border-radius:999px; margin:.4rem 0 .6rem}
.px-trainer-progress span{display:block; width:0; height:100%; border-radius:inherit; background:var(--trainer-accent); transition:width .35s ease}
.px-trainer-checks{list-style:none; padding:0; margin:.45rem 0 .7rem; display:grid; gap:.3rem; font-size:.82rem}
.px-trainer-checks[hidden]{display:none}
.px-trainer-checks .is-pass{color:#15803D}
.px-trainer-checks .is-fail{color:#B45309}
.px-trainer-explain{border-top:1px solid var(--line); margin-top:.75rem; padding-top:.65rem; color:var(--slate); font-size:.88rem; line-height:1.6}
.px-trainer-explain summary{cursor:pointer; color:var(--primary-dark); font-weight:750}
.px-trainer-explain p{margin:.7rem 0}
.px-trainer-explain pre{margin:.7rem 0 0; padding:.75rem; overflow:auto; border-radius:9px; background:#F1F5F9; color:#0F172A; font:.78rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}

/* ---------- Regex practice studio ---------- */
.px-regex-studio{--rx-ink:#18213b; --rx-muted:#687590; margin:1.6rem 0 1.9rem; padding:clamp(1rem,2.5vw,1.65rem); border:1px solid #DCE4F3; border-radius:24px; background:radial-gradient(ellipse at 0 0,#EEF2FF 0,transparent 42%),linear-gradient(145deg,#fff,#F8FAFF); box-shadow:0 18px 50px rgba(30,55,105,.09)}
.px-regex-heading{display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem}
.px-regex-mark{width:3.5rem; height:3.5rem; display:grid; place-items:center; flex:0 0 auto; border-radius:18px; background:linear-gradient(140deg,#4F46E5,#9333EA); color:#fff; font:800 1.08rem/1 ui-monospace,Consolas,monospace; box-shadow:0 9px 22px rgba(99,75,220,.25)}
.px-regex-eyebrow{color:#6557D9; font-size:.7rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase}
.px-regex-heading h3{margin:.1rem 0 .22rem; color:var(--rx-ink); font-size:clamp(1.25rem,2.5vw,1.65rem); letter-spacing:-.025em}
.px-regex-heading p{margin:0; max-width:75ch; color:var(--rx-muted); font-size:.9rem; line-height:1.55}
.px-regex-tabs{display:flex; gap:.45rem; padding:.3rem; width:max-content; max-width:100%; overflow:auto; border:1px solid #E4E8F1; border-radius:14px; background:#F1F4FA}
.px-regex-tab{display:flex; align-items:center; gap:.45rem; border:0; border-radius:10px; padding:.58rem .85rem; background:transparent; color:#61708B; font:inherit; font-size:.84rem; font-weight:750; line-height:1.2; cursor:pointer; white-space:nowrap; transition:background .18s,color .18s,box-shadow .18s}
.px-regex-tab:hover{color:#252D48}.px-regex-tab.is-active{color:#312E81; background:#fff; box-shadow:0 2px 7px rgba(24,33,59,.1)}
.px-regex-dot{width:.55rem; height:.55rem; border-radius:50%; background:#F0B429}.dot-py{background:#3776AB}.dot-php{background:#777BB3}
.px-regex-challenge-bar{display:flex; align-items:center; gap:.65rem; margin:1.15rem 0 .45rem; flex-wrap:wrap}
.px-regex-challenge-bar>label{font-size:.8rem; font-weight:800; color:var(--rx-ink)}
.px-regex-challenge-bar select{min-width:min(100%,240px); border:1px solid #D9E0EE; border-radius:10px; padding:.55rem 2rem .55rem .75rem; color:var(--rx-ink); background:#fff; font:inherit; font-size:.84rem; font-weight:600}
.px-regex-level{padding:.23rem .55rem; border-radius:999px; background:#EDE9FE; color:#6D28D9; font-size:.7rem; font-weight:800}
.px-regex-goal{margin:.55rem 0 1rem; color:#52617D; font-size:.89rem; line-height:1.55}
.px-regex-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:.85rem}
.px-regex-editor-panel,.px-regex-result-panel{min-width:0; padding:.95rem; border:1px solid #E1E7F1; border-radius:16px; background:rgba(255,255,255,.86)}
.px-regex-field{display:block}.px-regex-field>span{display:block; margin-bottom:.38rem; color:#56647D; font-size:.76rem; font-weight:800}
.px-regex-input-wrap{display:flex; align-items:center; gap:.15rem; min-height:2.65rem; padding:0 .7rem; border:1px solid #CBD5E7; border-radius:11px; background:#0D1530; color:#93A5CA; font:.9rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}
.px-regex-input-wrap:focus-within{outline:3px solid rgba(99,102,241,.2); border-color:#7771E8}
.px-regex-input-wrap input{width:100%; min-width:0; border:0; outline:0; background:transparent; color:#E9E8FF; font:inherit}
.px-regex-flags{min-width:1.2em; color:#C4B5FD; font-weight:800; letter-spacing:.12em}
.px-regex-options{display:flex; flex-wrap:wrap; gap:.45rem .85rem; margin:.65rem 0 .9rem}
.px-regex-options label{display:flex; align-items:center; gap:.35rem; color:#5D6A83; font-size:.75rem; cursor:pointer}
.px-regex-options [hidden],.px-regex-replacement-field[hidden],.px-regex-output[hidden]{display:none!important}
.px-regex-options input{accent-color:#6D5CE8}
.px-regex-options code{color:#6654BD; font:700 .72rem ui-monospace,Consolas,monospace}
.px-regex-mode-field{margin-top:.65rem}.px-regex-mode-field select,.px-regex-replacement-field input{width:100%; border:1px solid #D7DFED; border-radius:10px; padding:.55rem .7rem; color:#24304A; background:#FBFCFF; font:inherit; font-size:.82rem}
.px-regex-replacement-field{margin-bottom:.8rem}
.px-regex-field textarea{width:100%; resize:vertical; border:1px solid #D7DFED; border-radius:10px; padding:.65rem .7rem; color:#24304A; background:#FBFCFF; font:.82rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}
.px-regex-field textarea:focus{outline:3px solid rgba(99,102,241,.15); border-color:#7771E8}
.px-regex-buttons{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.7rem}
.px-regex-status{min-height:1.2em; color:#687590; font-size:.76rem}
.px-regex-status.is-error{color:#B42318}.px-regex-status.is-success{color:#15803D; font-weight:750}
.px-regex-result-head,.px-regex-code-head{display:flex; justify-content:space-between; align-items:center; gap:.7rem; color:#37415B; font-size:.78rem; font-weight:800}
.px-regex-result-head span{min-width:1.7rem; padding:.16rem .45rem; text-align:center; border-radius:999px; background:#EEF2FF; color:#5145CD; font-size:.72rem}
.px-regex-highlight{min-height:5.2rem; margin-top:.65rem; padding:.7rem; border:1px solid #E8ECF4; border-radius:10px; background:#FBFCFE; color:#35415B; font:.8rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere}
.px-regex-highlight mark{padding:.08em .12em; border-radius:4px; background:#DDD6FE; color:#4C1D95; box-shadow:0 0 0 1px #C4B5FD}
.px-regex-match-list{display:flex; flex-wrap:wrap; gap:.35rem; min-height:1.6rem; margin-top:.55rem}
.px-regex-match-chip{max-width:100%; padding:.2rem .48rem; overflow:hidden; text-overflow:ellipsis; border-radius:7px; background:#F1F5F9; color:#475569; font:.72rem ui-monospace,SFMono-Regular,Consolas,monospace}
.px-regex-output{margin-top:.8rem; color:#37415B; font-size:.78rem}.px-regex-output pre{margin:.4rem 0 0; padding:.7rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid #E8ECF4; border-radius:10px; background:#FBFCFE; font:.8rem/1.55 ui-monospace,Consolas,monospace}
.px-regex-code-wrap{margin-top:.85rem; padding:.85rem .95rem; border-radius:14px; background:#0D1530; color:#DCE4FA}
.px-regex-code-head{color:#BBC7E2}.px-regex-code-head span{color:#94A3C8; font-size:.72rem}
.px-regex-code-wrap pre{margin:.65rem 0 0; overflow:auto; color:#D7E0F5; font:.76rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.px-regex-note{margin:.7rem 0 0; color:#77839B; font-size:.73rem; line-height:1.5}
@media(max-width:760px){.px-regex-layout{grid-template-columns:1fr}}
@media(max-width:520px){.px-regex-heading{align-items:flex-start}.px-regex-mark{width:2.85rem;height:2.85rem;border-radius:14px;font-size:.9rem}.px-regex-editor-panel,.px-regex-result-panel{padding:.75rem}.px-regex-studio{border-radius:18px}}
/* Задание, закрытое для гостя (открывается после регистрации) */
.px-trainer-lock{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.8rem; padding:.9rem 1rem; border:1px dashed var(--line); border-radius:12px; background:rgba(255,255,255,.7)}
.px-trainer-lock p{flex:1 1 100%; margin:0; color:var(--slate); font-size:.92rem}
@media(max-width:520px){.px-trainer-card{padding:.9rem}.px-trainer-task{min-height:0}}

/* ---------- Страница ролика ---------- */
.video-detail-hero .video-hero{padding-block:clamp(28px,4vw,44px) clamp(80px,10vw,120px)}
.video-detail-hero h1{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.video-detail-hero .video-hero-sub{margin-bottom:1rem}
.px-crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; font-size:.86rem; color:#7E90BC; margin-bottom:1rem}
.px-crumbs a{color:#B9C6E4}
.px-crumbs a:hover{color:#fff}
.px-head-tags{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.7rem}
.px-meta{font-size:.84rem; color:#8FA3CC}
.video-detail-hero .video-card-tag{background:rgba(255,255,255,.1); color:#DBEAFE}
.px-langtabs{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem}
.px-tabs-label{font-size:.84rem; color:#8FA3CC; margin-right:.2rem}
.px-tab{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  border-radius:999px;
  padding:.3rem .85rem;
  font-size:.84rem; font-weight:700;
  color:#DBEAFE;
  transition:background .2s ease, color .2s ease;
}
.px-tab:hover{background:rgba(255,255,255,.15); color:#fff}
.px-tab.active{background:#fff; color:var(--ink); border-color:#fff}

.px-player{
  position:relative;
  z-index:1;
  margin-top:clamp(-96px,-8vw,-56px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:clamp(1rem,2.4vw,1.7rem);
  outline:none;
}
.px-body{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:1.1rem;
  align-items:start;
}
.px-noscript{margin:0; color:var(--muted); font-size:.9rem}

/* Панель кода */
.px-code{
  position:relative;
  margin:0;
  background:#0B1226;
  border-radius:var(--radius);
  padding:.9rem 0;
  font-family:'Cascadia Code','JetBrains Mono',Consolas,'Courier New',monospace;
  font-variant-ligatures:none;
  font-feature-settings:"liga" 0, "calt" 0;
  font-size:.86rem;
  line-height:1.75;
  color:#E2E8F0;
  overflow:auto;
  max-height:440px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.px-code code{font:inherit; display:block}
.px-line{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:100%;
  white-space:pre;
  padding-right:1rem;
  border-left:3px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
.px-line.is-active{background:rgba(59,130,246,.22); border-left-color:var(--amber-light)}
.px-ln{display:inline-block; width:2.6em; padding-right:1em; text-align:right; color:#475569; user-select:none; flex-shrink:0}
.px-line.is-active .px-ln{color:var(--amber-light)}
.tk-kw{color:#C4B5FD}
.tk-str{color:#86EFAC}
.tk-num{color:#FCD34D}
.tk-com{color:#64748B; font-style:italic}
.tk-fn{color:#93C5FD}
.tk-var{color:#F9A8D4}
.px-cond{
  position:sticky;
  right:.6rem;
  z-index:1;
  margin-left:.9rem;
  font-family:'Roboto',system-ui,sans-serif;
  font-size:.72rem;
  font-weight:700;
  padding:.08rem .55rem;
  border-radius:999px;
  box-shadow:0 0 0 3px #0B1226;
  animation:px-pop .4s ease;
}
.px-cond.is-true{background:#14532D; color:#86EFAC}
.px-cond.is-false{background:#7F1D1D; color:#FCA5A5}

/* Сцена */
.px-stage{display:flex; flex-direction:column; gap:.7rem; min-width:0}
.px-panel{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:.7rem .8rem}
.px-panel-title{
  display:flex; justify-content:space-between; gap:.5rem;
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.5rem;
}
.px-cells{display:flex; flex-wrap:wrap; gap:.45rem}
.px-cell{
  min-width:50px;
  padding:.4rem .55rem .3rem;
  background:#fff;
  border:2px solid var(--line);
  border-radius:10px;
  text-align:center;
  transition:border-color .25s ease, background .25s ease, opacity .25s ease;
}
.px-cell-key{display:block; font-size:.68rem; font-weight:700; color:var(--indigo); margin-bottom:.05rem}
.px-cell-val{display:block; font-family:Consolas,'Courier New',monospace; font-weight:700; font-size:.84rem; color:var(--ink); white-space:nowrap}
.px-cell-idx{display:block; font-size:.64rem; color:var(--muted); margin-top:.05rem}
.px-cell.is-hi{border-color:var(--primary); background:#EFF4FF; transform:translateY(-3px); box-shadow:0 6px 14px rgba(37,99,235,.18)}
.px-cell.is-done{opacity:.45}
.px-cell.is-new{animation:px-pop .45s ease}
.px-empty,
.px-lane-empty,
.px-var-empty{font-size:.78rem; color:var(--muted)}

.px-frames{display:flex; flex-direction:column; gap:.4rem}
.px-frame{background:#fff; border:1px solid var(--line); border-radius:10px; padding:.4rem .6rem}
.px-frame.is-top{border-color:rgba(37,99,235,.45); box-shadow:0 4px 12px rgba(37,99,235,.10)}
.px-frame.is-new{animation:px-slide .4s ease}
.px-frame-name{
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  font-family:Consolas,'Courier New',monospace;
  font-size:.78rem; font-weight:700;
  color:var(--primary-dark);
  margin-bottom:.2rem;
}
.px-frame:not(.is-top) .px-frame-name{color:var(--muted)}
.px-ret{
  font-family:'Roboto',system-ui,sans-serif;
  font-size:.72rem;
  background:rgba(34,197,94,.14);
  color:#15803D;
  padding:.05rem .5rem;
  border-radius:999px;
  white-space:nowrap;
  animation:px-pop .45s ease;
}
.px-var{
  display:flex; justify-content:space-between; gap:.8rem;
  font-family:Consolas,'Courier New',monospace;
  font-size:.83rem;
  padding:.15rem .35rem;
  border-radius:6px;
}
.px-var-name{color:var(--slate); font-weight:700; white-space:nowrap}
.px-var-val{color:var(--ink); text-align:right; word-break:break-word}
.px-var.is-changed{animation:px-flash 1.2s ease}

.px-lanes{display:grid; gap:.4rem}
.px-lane{display:flex; align-items:center; gap:.6rem}
.px-lane-name{font-size:.72rem; font-weight:700; color:var(--slate); width:8.2rem; flex-shrink:0}
.px-lane-items{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
  flex:1; min-height:32px;
  background:#fff;
  border:1px dashed #CBD5E1;
  border-radius:8px;
  padding:.2rem .35rem;
}
.px-chip{
  font-family:Consolas,'Courier New',monospace;
  font-size:.76rem; font-weight:700;
  padding:.15rem .5rem;
  border-radius:6px;
  background:rgba(8,145,178,.12);
  color:#0E7490;
}
.px-chip.is-new{animation:px-pop .45s ease}

.px-console{background:#0B1226; border-radius:var(--radius); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.px-console-head{
  display:flex; align-items:center; gap:.35rem;
  padding:.45rem .75rem;
  background:rgba(255,255,255,.05);
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#7E90BC;
}
.px-console-head i{width:9px; height:9px; border-radius:50%; background:#EF4444}
.px-console-head i:nth-child(2){background:#F59E0B}
.px-console-head i:nth-child(3){background:#22C55E; margin-right:.4rem}
.px-console-body{
  padding:.55rem .85rem;
  font-family:Consolas,'Courier New',monospace;
  font-size:.84rem;
  line-height:1.6;
  color:#A7F3D0;
  min-height:62px;
  max-height:160px;
  overflow-y:auto;
  white-space:pre-wrap;
  word-break:break-word;
}
.px-out::before{content:'› '; color:#475569}
.px-out.is-new{animation:px-type .45s ease}
.px-out.is-muted{color:#475569}
.px-out.is-muted::before{content:''}

.px-alert{
  display:flex; gap:.55rem; align-items:flex-start;
  background:#FEF2F2;
  border:1px solid #FECACA;
  color:#991B1B;
  border-radius:var(--radius);
  padding:.6rem .8rem;
  font-size:.88rem; font-weight:600;
  animation:px-shake .45s ease;
}
.px-alert svg{width:20px; height:20px; flex-shrink:0}

/* Подпись и управление */
.px-caption{
  margin:1rem 0 .9rem;
  min-height:3.3em;
  font-size:1rem;
  line-height:1.55;
  color:var(--ink);
  background:var(--grad-soft);
  border:1px solid rgba(37,99,235,.15);
  border-radius:12px;
  padding:.75rem 1rem;
}
.px-caption.is-anim{animation:px-type .35s ease}
.px-caption code,
.px-alert code,
.px-tstep-text code{
  font-family:Consolas,'Courier New',monospace;
  font-size:.88em;
  background:rgba(15,23,42,.07);
  padding:.05rem .35rem;
  border-radius:5px;
  color:var(--primary-dark);
}
.px-progress{display:flex; gap:4px; margin-bottom:.8rem}
.px-seg{
  flex:1;
  height:6px;
  border:0; padding:0;
  border-radius:999px;
  background:var(--line);
  cursor:pointer;
  overflow:hidden;
  position:relative;
  transition:background .2s ease;
}
.px-seg:hover{background:#CBD5E1}
.px-seg span{position:absolute; inset:0; width:0; background:var(--grad); border-radius:inherit}
.px-seg.is-done span,
.px-seg.is-current span{width:100%}
.px-seg.is-running span{width:0; animation:px-fill var(--dur,2000ms) linear forwards}
.px-ctrl-row{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.px-btn{
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.px-btn svg{width:18px; height:18px}
.px-btn:hover{border-color:var(--primary); color:var(--primary)}
.px-btn-main{width:50px; height:50px; background:var(--grad); color:#fff; border:0; box-shadow:var(--shadow-btn)}
.px-btn-main svg{width:20px; height:20px}
.px-btn-main:hover{color:#fff; transform:scale(1.06)}
.px-stepcount{font-size:.88rem; font-weight:700; color:var(--slate); margin-left:.3rem; font-variant-numeric:tabular-nums}
.px-speed{
  margin-left:auto;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:.4rem .85rem;
  font:inherit; font-size:.85rem; font-weight:800;
  color:var(--slate);
  cursor:pointer;
}
.px-speed:hover{border-color:var(--primary); color:var(--primary)}
.px-nextvideo{display:none}
.px-player.is-end .px-nextvideo{display:inline-flex; animation:px-pop .45s ease}
.px-kbd-hint{font-size:.76rem; color:var(--muted); margin:.7rem 0 0}

/* Разбор по шагам, блок курса, соседние ролики */
.px-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2rem);
  align-items:start;
  margin-top:clamp(32px,5vw,52px);
}
.px-transcript h2,
.px-related h2{font-size:clamp(1.3rem,2.4vw,1.6rem); font-weight:900; margin-bottom:1rem}
.px-transcript ol{display:flex; flex-direction:column; gap:.5rem}
.px-tstep{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:.7rem .9rem;
  font:inherit;
  font-size:.95rem;
  line-height:1.55;
  color:var(--slate);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.px-tstep:hover{border-color:rgba(37,99,235,.4)}
.px-tstep.is-done{color:var(--muted)}
.px-tstep.is-current{border-color:var(--primary); background:#EFF4FF; color:var(--ink); box-shadow:0 4px 14px rgba(37,99,235,.12)}
.px-tstep-line{
  flex-shrink:0;
  min-width:4.6rem;
  text-align:center;
  font-size:.74rem;
  font-weight:800;
  color:var(--primary-dark);
  background:rgba(37,99,235,.09);
  border-radius:999px;
  padding:.18rem .55rem;
  margin-top:.12rem;
  white-space:nowrap;
}
.px-aside{position:sticky; top:96px; display:flex; flex-direction:column; gap:1rem}
.px-cta{
  position:relative;
  overflow:hidden;
  background:var(--navy);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:1.5rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.px-cta::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(360px 240px at 110% -10%, rgba(37,99,235,.55), transparent 65%);
  pointer-events:none;
}
.px-cta > *{position:relative}
.px-cta h2{color:#fff; font-size:1.2rem; font-weight:900; margin:0}
.px-cta p{color:#B9C6E4; font-size:.92rem; margin:0 0 .3rem}
.px-prevnext{display:flex; flex-direction:column; gap:.6rem}
.px-prevnext a{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:.75rem .95rem;
  color:var(--ink);
  transition:border-color .2s ease, transform .2s ease;
}
.px-prevnext a:hover{border-color:rgba(37,99,235,.4); transform:translateY(-2px)}
.px-prevnext small{font-size:.76rem; font-weight:700; color:var(--primary)}
.px-prevnext strong{font-size:.95rem; line-height:1.35}
.px-related{margin-top:clamp(40px,6vw,64px)}
.px-related .video-grid{margin-top:0}
.px-related-all{text-align:center; margin:1.6rem 0 0}

@keyframes px-pop{0%{transform:scale(.85); opacity:.25} 60%{transform:scale(1.06); opacity:1}}
@keyframes px-slide{0%{transform:translateY(-10px); opacity:0}}
@keyframes px-type{0%{transform:translateX(-6px); opacity:0}}
@keyframes px-flash{0%{background:rgba(245,158,11,.38)} 100%{background:transparent}}
@keyframes px-fill{to{width:100%}}
@keyframes px-shake{20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)}}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .px-body{grid-template-columns:1fr}
  .px-code{max-height:300px}
  .px-detail-grid{grid-template-columns:1fr}
  .px-aside{position:static}
  .px-hub{grid-template-columns:minmax(0,1fr)}
  .px-side{position:static; max-height:none; overflow:visible; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.9rem 1rem; padding:.9rem}
  .px-side .video-search{grid-column:1 / -1}
  .px-side .video-langs{grid-template-columns:repeat(4,auto)}
  .px-side .lang-tab{justify-content:center; gap:.35rem}
  .px-side .lang-tab .lang-count{margin-left:0}
  #pxTopicsBlock{grid-column:1 / -1; min-width:0}
  .px-topics{flex-direction:row; overflow-x:auto; gap:.4rem; margin:0 -.9rem; padding:0 .9rem .2rem; scrollbar-width:none}
  .px-topics::-webkit-scrollbar{display:none}
  .px-topic{width:auto; flex:0 0 auto; padding:.35rem .7rem .35rem .4rem; border:1px solid var(--line); border-radius:999px; background:#fff}
  .px-topic.active{background:var(--grad); border-color:transparent; color:#fff; box-shadow:none}
  .px-topic.active .tag-count{background:rgba(255,255,255,.22); color:#fff}
  .px-topic.active .px-topic-done{color:#fff}
  .px-topic-ico{width:24px; height:24px; border-radius:50%}
  .px-topic-ico svg{width:13px; height:13px}
  .px-side-progress .px-side-hint{display:none}
  .px-side-progress .px-switch{margin-top:.5rem}
}
@media (max-width:640px){
  .px-side{grid-template-columns:minmax(0,1fr)}
  .px-side .video-langs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .px-ctab{flex:0 0 auto; padding:.6rem .8rem; font-size:.88rem}
  .px-group-head{flex-wrap:wrap}
  .px-group .video-grid{grid-template-columns:minmax(0,1fr)}
  .px-continue{margin-top:1.2rem}
}
@media (max-width:720px){
  .video-toolbar{flex-direction:column; align-items:stretch}
  .video-search{flex:none; max-width:none}
  .video-langs{border-radius:16px}
  .lang-tab{padding:.45rem .8rem; font-size:.88rem}
  .px-player{display:flex; flex-direction:column; padding-bottom:0}
  .px-caption{order:1; margin:0 0 .8rem; font-size:.95rem}
  .px-body{order:2}
  .px-controls{
    order:3;
    position:sticky;
    bottom:0;
    z-index:3;
    margin:.8rem calc(-1 * clamp(1rem,2.4vw,1.7rem)) 0;
    padding:.7rem clamp(1rem,2.4vw,1.7rem) .9rem;
    background:#fff;
    border-top:1px solid var(--line);
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
  }
  .px-kbd-hint{display:none}
  .px-lane-name{width:6.4rem}
  .px-speed{margin-left:0}
}