.live-empty,.live-state{padding:32px;border:1px solid #e8e4df;border-radius:16px;background:#fff;color:#6e6874}.live-error{color:#9b3030}.live-cover img,.live-detail-cover img{width:100%;height:100%;object-fit:cover;display:block}.live-detail-cover{padding:0;overflow:hidden}.live-lesson{text-decoration:none;color:inherit}.preview-badge{display:inline-block;margin-right:10px;padding:3px 7px;border-radius:99px;background:#eee8ff;color:#6748df;font-size:10px;vertical-align:middle}.video-player-shell{position:relative;aspect-ratio:16/9;border-radius:13px;overflow:hidden;background:#070708;color:#fff}.video-player-shell video,.video-player-shell .tcp-video{width:100%!important;height:100%!important}.player-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:radial-gradient(circle at 60% 35%,#302855 0,#14121f 34%,#070708 72%)}.player-message h3{margin:8px 0 6px;font-size:24px}.player-message p{max-width:560px;margin:0 0 18px;color:#aaa4b8;line-height:1.7}.player-message .btn{position:relative;z-index:2}.course-all .live-empty{grid-column:1/-1}

/* V0.12 Player UI
   - 不显示 HLS / SimpleAES / CloudBase / psign 等实现信息
   - 加载阶段只显示简洁动画
   - “网页最大化”作为播放器控制栏图标，与原生全屏按钮并列
*/
.video-player-shell{
  min-width:0;
  isolation:isolate;
}

.video-player-shell>video,
.video-player-shell .tcp-video-player,
.video-player-shell .tcp-video,
.video-player-shell .video-js{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
}

.video-player-shell video,
.video-player-shell .vjs-tech,
.video-player-shell .tcp-video-player video,
.video-player-shell .tcp-video video{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#000!important;
}

.video-player-shell .vjs-control-bar,
.video-player-shell .tcp-control-bar{
  z-index:30!important;
}

.video-player-shell .vjs-big-play-button{
  z-index:25!important;
}

.player-loading{
  position:absolute;
  inset:0;
  z-index:22;
  display:grid;
  place-items:center;
  background:#070708;
  pointer-events:none;
}

.player-spinner{
  width:34px;
  height:34px;
  border:3px solid rgba(255,255,255,.16);
  border-top-color:#8168ff;
  border-right-color:#8168ff;
  border-radius:50%;
  animation:tridlearn-player-spin .72s linear infinite;
  box-shadow:0 0 28px rgba(111,86,232,.16);
}

@keyframes tridlearn-player-spin{
  to{transform:rotate(360deg)}
}

@media (prefers-reduced-motion: reduce){
  .player-spinner{animation-duration:1.6s}
}

/* 网页最大化按钮插入 TCPlayer / Video.js 控制栏。
   原生 fullscreenToggle 继续负责真正的系统全屏。 */
.video-player-shell .tridlearn-theater-control{
  width:3.2em!important;
  min-width:3.2em!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.video-player-shell .tridlearn-theater-control svg{
  width:19px;
  height:19px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.video-player-shell .tridlearn-theater-control:hover{
  color:#fff;
}

.video-player-shell .tridlearn-theater-control[aria-pressed="true"]{
  color:#a795ff;
}

/* 网页最大化：只扩展到浏览器可视区域，不进入系统全屏。 */
.theater-mode{
  overflow:hidden;
  background:#09090b;
}

.theater-mode .site-header,
.theater-mode .learning-coursebar,
.theater-mode .lesson-sidebar,
.theater-mode .lesson-headline,
.theater-mode .support-section,
.theater-mode .course-resource-panel{
  display:none!important;
}

.theater-mode .learning-main{padding:0}

.theater-mode .learning-workspace{
  display:block;
  width:100vw;
  max-width:none;
  padding:0;
  margin:0;
}

.theater-mode .learning-content{
  width:100vw;
  height:100vh;
}

.theater-mode .video-stage{
  height:100vh;
  border-radius:0;
  padding:0;
  background:#09090b;
  box-shadow:none;
  display:flex;
  flex-direction:column;
}

.theater-mode .video-topline{
  display:none;
}

.theater-mode .video-player-shell{
  flex:1 1 auto;
  aspect-ratio:auto;
  border-radius:0;
  min-height:0;
}

@media(max-width:560px){
  .video-player-shell .tridlearn-theater-control{
    width:2.8em!important;
    min-width:2.8em!important;
  }
}

/* V0.12.2 Course data sync */
.live-detail-cover{position:relative;background:#f2eee8}
.live-detail-cover .live-cover-fallback{position:absolute;inset:0;display:flex;align-items:flex-end;padding:28px;background:linear-gradient(145deg,#253866,#5e6deb 55%,#9b7cff);color:#fff;font-size:34px;font-weight:900;line-height:1.02;letter-spacing:.03em}
.live-detail-cover .live-cover-fallback small{font-size:14px;font-weight:700;letter-spacing:.08em;opacity:.66}
.live-detail-cover img{position:relative;z-index:2}
.course-description-section{padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--inner-line)}
.course-description-text{white-space:pre-line;color:#57524d;line-height:1.9;margin:0}
.course-resource-panel{margin-top:30px;padding-top:26px;border-top:1px solid var(--inner-line)}
.course-resource-panel h3{margin:4px 0 9px}
.course-resource-panel p{margin:0 0 12px}
.project-file-actions{display:grid;gap:9px}
.detail-aside .project-file-link{display:flex;justify-content:center;text-decoration:none}


/* V0.12.3 - real course cover owns the whole visual frame */
.library-v08 .course-card .thumb.live-cover,
.course-card .thumb.live-cover{
  position:relative;
  padding:0!important;
  background:#eee9e3!important;
  align-items:stretch;
  overflow:hidden;
}
.library-v08 .course-card .thumb.live-cover::before,
.library-v08 .course-card .thumb.live-cover::after,
.course-card .thumb.live-cover::before,
.course-card .thumb.live-cover::after{
  content:none!important;
  display:none!important;
}
.live-cover img{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
}
.live-card-cover-fallback{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:#f1ede8;
  color:#746d67;
  letter-spacing:.08em;
  text-align:center;
}
.live-card-cover-fallback span{font-size:17px;font-weight:800}
.live-card-cover-fallback small{font-size:11px;font-weight:700;opacity:.62}

/* Auth/account live states */
.auth-error{color:#a53232!important}
.auth-card [hidden]{display:none!important}
.auth-session{display:grid;gap:14px}
.auth-session .account-user-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#756f69;font-size:12px}
.auth-session-actions{display:flex;gap:10px;flex-wrap:wrap}
.account-live-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.account-user-id{font-size:12px;color:#77726b}


/* V0.12.3.2 - structural real-cover frame.
   A real cover NEVER reuses .thumb, so legacy gradient/padding/pseudo-elements cannot leak through. */
.library-v08 .course-card .course-cover-image,
.course-card .course-cover-image{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  padding:0;
  margin:0;
  border:0;
  border-radius:16px;
  overflow:hidden;
  background:#f1ede8;
  box-shadow:0 13px 30px rgba(28,32,52,.12);
  transition:transform .2s ease,box-shadow .2s ease;
}
.library-v08 .course-card:hover .course-cover-image,
.course-card:hover .course-cover-image{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(28,32,52,.18);
}
.course-cover-image img{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  object-fit:cover;
  object-position:center;
}
.course-cover-image-fallback{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:#f1ede8;
  color:#746d67;
  letter-spacing:.08em;
  text-align:center;
}
.course-cover-image-fallback span{font-size:17px;font-weight:800}
.course-cover-image-fallback small{font-size:11px;font-weight:700;opacity:.62}


/* V0.12.3.3 - hard full-bleed cover compatibility. */
.library-v08 .course-card .thumb.live-cover,
.course-card .thumb.live-cover,
.library-v08 .course-card .course-cover-image,
.course-card .course-cover-image{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/10!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:#f1ede8!important;
  background-image:none!important;
  display:block!important;
  box-sizing:border-box!important;
}
.library-v08 .course-card .thumb.live-cover::before,
.library-v08 .course-card .thumb.live-cover::after,
.course-card .thumb.live-cover::before,
.course-card .thumb.live-cover::after,
.library-v08 .course-card .course-cover-image::before,
.library-v08 .course-card .course-cover-image::after,
.course-card .course-cover-image::before,
.course-card .course-cover-image::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
.library-v08 .course-card .thumb.live-cover > img,
.course-card .thumb.live-cover > img,
.library-v08 .course-card .course-cover-image > img,
.course-card .course-cover-image > img{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
}

/* V0.12.5 Performance V1 */
@keyframes tridlearn-skeleton-pulse{
  0%{opacity:.55}
  50%{opacity:.95}
  100%{opacity:.55}
}
.skeleton-block,.skeleton-line{
  background:linear-gradient(90deg,#eeeae5 0%,#f7f4f0 50%,#eeeae5 100%);
  background-size:200% 100%;
  border-radius:10px;
  animation:tridlearn-skeleton-pulse 1.25s ease-in-out infinite;
}
.course-skeleton{pointer-events:none}
.course-skeleton .skeleton-cover{width:100%;aspect-ratio:16/10;border-radius:16px}
.skeleton-line{height:14px;width:100%;margin:10px 0}
.skeleton-line-xs{width:30%;height:10px}
.skeleton-line-title{width:68%;height:22px}
.skeleton-line-short{width:58%}
.detail-skeleton .skeleton-detail-cover{width:100%;aspect-ratio:16/10;border-radius:24px}
.detail-skeleton .skeleton-title-wide{width:72%;height:42px;margin:18px 0}
.detail-skeleton .skeleton-action{height:92px;margin-top:28px;border-radius:18px}
.detail-skeleton .skeleton-back{width:110px;height:12px}
.detail-skeleton .skeleton-heading{width:210px;height:28px;margin-bottom:22px}
.detail-skeleton .skeleton-aside{height:220px;border-radius:18px}
@media (prefers-reduced-motion:reduce){.skeleton-block,.skeleton-line{animation:none}}

/* V0.12.25 Course Delivery V2 */
.legacy-detail-action{display:block}
.legacy-detail-action>[data-local-access],.legacy-detail-action{min-width:0}
[data-local-access] small,.local-download-item small{display:block;margin-top:5px;color:var(--muted);line-height:1.55}
.local-download-list{display:grid;gap:10px;margin-top:16px}
.local-download-item{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.local-download-item code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;background:#f4f3f7;border-radius:6px;padding:2px 6px;color:#282633}
.local-playback-guide{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.local-playback-guide h3{margin:5px 0 12px}
.local-guide-markdown{color:var(--text);line-height:1.75}
.local-guide-markdown p{margin:8px 0}
.local-guide-markdown h3,.local-guide-markdown h4{margin:18px 0 8px}
.local-guide-markdown ul,.local-guide-markdown ol{padding-left:22px;margin:8px 0}
.local-guide-markdown hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.local-guide-markdown a{color:#5d52cf;text-decoration:none}
.local-guide-markdown a:hover{text-decoration:underline}
.legacy-course-note{margin-top:42px;padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.legacy-course-note h2{margin:6px 0 12px}
.legacy-course-note p{line-height:1.75}
@media(max-width:700px){.local-download-item{align-items:stretch;flex-direction:column}.local-download-item .btn{width:100%;text-align:center}}
.legacy-detail-action>.btn{margin-top:14px}


/* V12.26 Course V2 visible delivery controls */
.library-mode-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.library-mode-row strong{font-size:13px;margin-right:4px}
.library-mode-row .mode-filter{appearance:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;cursor:pointer;color:var(--text);font:inherit}
.library-mode-row .mode-filter:hover{background:#f7f7f8}
.library-mode-row .mode-filter.active{border-color:#2c2c31;background:#2c2c31;color:#fff}
.library-mode-help{margin-left:auto;color:var(--muted);font-size:12px;line-height:1.5}
.course-mode-pill.is-web{white-space:nowrap}
.course-mode-pill.is-local{white-space:nowrap;font-weight:650}
@media(max-width:760px){.library-mode-help{width:100%;margin-left:0}.library-mode-row{align-items:flex-start}}


/* JulyLearn V12.94 — responsive Bilibili-inspired TCPlayer chrome.
   Visual hierarchy only: compact bottom bar, tighter transport cluster,
   scaled controls in normal/theater/fullscreen sizes, and pause feedback. */
#playerShell{
  --jl-player-ui-scale:1;
  --jl-player-control-h:calc(48px * var(--jl-player-ui-scale));
  --jl-player-control-pad:calc(10px * var(--jl-player-ui-scale));
  --jl-player-icon:calc(20px * var(--jl-player-ui-scale));
  --jl-player-small-icon:calc(17px * var(--jl-player-ui-scale));
  --jl-player-font:calc(13px * var(--jl-player-ui-scale));
}

#playerShell .vjs-control-bar,
#playerShell .tcp-control-bar{
  height:var(--jl-player-control-h)!important;
  min-height:var(--jl-player-control-h)!important;
  padding:calc(4px * var(--jl-player-ui-scale)) var(--jl-player-control-pad) 0!important;
  align-items:center!important;
  gap:0!important;
  background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.15) 78%,rgba(0,0,0,0) 100%)!important;
  box-sizing:border-box!important;
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

#playerShell .vjs-control,
#playerShell .tcp-control-bar .vjs-control{
  height:calc(var(--jl-player-control-h) - 4px * var(--jl-player-ui-scale))!important;
  line-height:calc(var(--jl-player-control-h) - 4px * var(--jl-player-ui-scale))!important;
  color:rgba(255,255,255,.96)!important;
}
#playerShell .vjs-control:hover,
#playerShell .vjs-control:focus-visible{color:#fff!important}

/* Progress line sits above the controls, thin at rest and easier to catch on hover. */
#playerShell .vjs-progress-control{
  position:absolute!important;
  z-index:4!important;
  left:var(--jl-player-control-pad)!important;
  right:var(--jl-player-control-pad)!important;
  top:calc(-5px * var(--jl-player-ui-scale))!important;
  width:auto!important;
  min-width:0!important;
  height:calc(12px * var(--jl-player-ui-scale))!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
}
#playerShell .vjs-progress-control .vjs-progress-holder{
  width:100%!important;
  height:max(2px,calc(3px * var(--jl-player-ui-scale)))!important;
  margin:0!important;
  background:rgba(255,255,255,.34)!important;
  border-radius:999px!important;
  transition:height .12s ease,transform .12s ease!important;
  overflow:visible!important;
}
#playerShell .vjs-progress-control:hover .vjs-progress-holder,
#playerShell .vjs-progress-control:focus-within .vjs-progress-holder{
  height:max(3px,calc(5px * var(--jl-player-ui-scale)))!important;
}
#playerShell .vjs-play-progress{
  background:#fff!important;
  border-radius:999px!important;
}
#playerShell .vjs-load-progress,
#playerShell .vjs-load-progress div{background:rgba(255,255,255,.24)!important}
#playerShell .vjs-play-progress:before{
  font-size:calc(11px * var(--jl-player-ui-scale))!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.5)!important;
}

/* Transport cluster: previous | play/pause | next. Play is visually dominant,
   chapter controls are smaller and closer, matching common Bilibili spacing. */
#playerShell .vjs-play-control,
#playerShell .tcp-play-control{
  width:calc(42px * var(--jl-player-ui-scale))!important;
  min-width:calc(42px * var(--jl-player-ui-scale))!important;
  flex:0 0 calc(42px * var(--jl-player-ui-scale))!important;
  margin:0!important;
  padding:0!important;
}
#playerShell .vjs-play-control .vjs-icon-placeholder:before,
#playerShell .tcp-play-control .vjs-icon-placeholder:before{
  font-size:calc(24px * var(--jl-player-ui-scale))!important;
  line-height:calc(var(--jl-player-control-h) - 4px * var(--jl-player-ui-scale))!important;
}
#playerShell .tridlearn-lesson-control{
  width:calc(30px * var(--jl-player-ui-scale))!important;
  min-width:calc(30px * var(--jl-player-ui-scale))!important;
  flex:0 0 calc(30px * var(--jl-player-ui-scale))!important;
  height:calc(var(--jl-player-control-h) - 4px * var(--jl-player-ui-scale))!important;
  margin:0!important;
  padding:0!important;
  opacity:.96;
}
#playerShell .tridlearn-prev-lesson-control{margin-right:calc(1px * var(--jl-player-ui-scale))!important}
#playerShell .tridlearn-next-lesson-control{margin-left:calc(1px * var(--jl-player-ui-scale))!important}
#playerShell .tridlearn-lesson-icon svg{
  width:var(--jl-player-small-icon)!important;
  height:var(--jl-player-small-icon)!important;
}
#playerShell .tridlearn-lesson-icon .lesson-transport-bar{stroke-width:2.2!important}

/* Time and utility controls: compact, white, with no button chrome. */
#playerShell .vjs-time-control{
  width:auto!important;
  min-width:0!important;
  padding:0 calc(2px * var(--jl-player-ui-scale))!important;
  font-size:var(--jl-player-font)!important;
  line-height:calc(var(--jl-player-control-h) - 4px * var(--jl-player-ui-scale))!important;
}
#playerShell .vjs-time-divider{padding:0 calc(1px * var(--jl-player-ui-scale))!important}
#playerShell .vjs-volume-panel,
#playerShell .vjs-playback-rate,
#playerShell .vjs-menu-button,
#playerShell .vjs-fullscreen-control,
#playerShell .tcp-fullscreen-control,
#playerShell .tridlearn-theater-control{
  width:calc(38px * var(--jl-player-ui-scale))!important;
  min-width:calc(38px * var(--jl-player-ui-scale))!important;
  flex:0 0 calc(38px * var(--jl-player-ui-scale))!important;
  margin:0!important;
}
#playerShell .vjs-volume-panel .vjs-icon-placeholder:before,
#playerShell .vjs-fullscreen-control .vjs-icon-placeholder:before,
#playerShell .tcp-fullscreen-control .vjs-icon-placeholder:before,
#playerShell .vjs-menu-button .vjs-icon-placeholder:before{
  font-size:var(--jl-player-icon)!important;
  line-height:calc(var(--jl-player-control-h) - 4px * var(--jl-player-ui-scale))!important;
}
#playerShell .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
#playerShell .vjs-volume-panel.vjs-volume-panel-horizontal:focus-within,
#playerShell .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active{
  width:calc(108px * var(--jl-player-ui-scale))!important;
  flex-basis:calc(108px * var(--jl-player-ui-scale))!important;
}
#playerShell .vjs-volume-panel .vjs-volume-control{
  font-size:calc(10px * var(--jl-player-ui-scale))!important;
}
#playerShell .vjs-playback-rate .vjs-playback-rate-value{
  font-size:calc(13px * var(--jl-player-ui-scale))!important;
  line-height:calc(var(--jl-player-control-h) - 4px * var(--jl-player-ui-scale))!important;
  font-weight:650!important;
}
#playerShell .tridlearn-theater-control svg{
  width:calc(18px * var(--jl-player-ui-scale))!important;
  height:calc(18px * var(--jl-player-ui-scale))!important;
  stroke-width:1.85!important;
}
#playerShell .vjs-menu-button-popup .vjs-menu{
  font-size:calc(12px * var(--jl-player-ui-scale))!important;
}
#playerShell .vjs-menu-content{
  border-radius:calc(4px * var(--jl-player-ui-scale))!important;
  background:rgba(20,20,22,.93)!important;
  box-shadow:0 calc(6px * var(--jl-player-ui-scale)) calc(24px * var(--jl-player-ui-scale)) rgba(0,0,0,.28)!important;
  backdrop-filter:blur(8px);
}

/* Initial big Play also scales with the player instead of staying fixed. */
#playerShell .vjs-big-play-button{
  width:calc(62px * var(--jl-player-ui-scale))!important;
  height:calc(62px * var(--jl-player-ui-scale))!important;
  margin-left:calc(-31px * var(--jl-player-ui-scale))!important;
  margin-top:calc(-31px * var(--jl-player-ui-scale))!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(16,16,18,.58)!important;
  box-shadow:0 calc(4px * var(--jl-player-ui-scale)) calc(18px * var(--jl-player-ui-scale)) rgba(0,0,0,.24)!important;
  backdrop-filter:blur(6px);
}
#playerShell .vjs-big-play-button .vjs-icon-placeholder:before{
  font-size:calc(30px * var(--jl-player-ui-scale))!important;
  line-height:calc(62px * var(--jl-player-ui-scale))!important;
}

/* Direct pause feedback: appears for user-triggered pause from the control button
   or Space, then fades quickly without blocking pointer interaction. */
#playerShell .player-state-feedback{
  position:absolute;
  z-index:34;
  left:50%;
  top:50%;
  width:calc(66px * var(--jl-player-ui-scale));
  height:calc(66px * var(--jl-player-ui-scale));
  transform:translate(-50%,-50%) scale(.88);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(16,16,18,.52);
  box-shadow:0 calc(5px * var(--jl-player-ui-scale)) calc(22px * var(--jl-player-ui-scale)) rgba(0,0,0,.24);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease,transform .16s ease;
}
#playerShell .player-state-feedback.is-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
#playerShell .player-pause-glyph{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(7px * var(--jl-player-ui-scale));
}
#playerShell .player-pause-glyph i{
  display:block;
  width:calc(7px * var(--jl-player-ui-scale));
  height:calc(27px * var(--jl-player-ui-scale));
  border-radius:calc(1.6px * var(--jl-player-ui-scale));
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.32);
}

/* Keep the visual system neutral; purple remains a product accent outside the player. */
#playerShell .tridlearn-theater-control[aria-pressed="true"]{color:#fff!important}

@media(max-width:560px){
  #playerShell{--jl-player-ui-scale:.72}
  #playerShell .vjs-control-bar,#playerShell .tcp-control-bar{padding-left:7px!important;padding-right:7px!important}
  #playerShell .vjs-progress-control{left:7px!important;right:7px!important}
}

/* JulyLearn V12.94 — persistent paused-state affordance + right-side volume utility. */
#playerShell .player-paused-affordance{
  position:absolute;
  z-index:33;
  right:calc(28px * var(--jl-player-ui-scale));
  bottom:calc(var(--jl-player-control-h) + 22px * var(--jl-player-ui-scale));
  width:calc(66px * var(--jl-player-ui-scale));
  height:calc(60px * var(--jl-player-ui-scale));
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.9);
  opacity:0;
  transform:translateY(calc(5px * var(--jl-player-ui-scale))) scale(.94);
  pointer-events:none;
  cursor:pointer;
  filter:drop-shadow(0 calc(3px * var(--jl-player-ui-scale)) calc(8px * var(--jl-player-ui-scale)) rgba(0,0,0,.36));
  transition:opacity .14s ease,transform .16s ease,color .12s ease;
}
#playerShell .player-paused-affordance.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
#playerShell .player-paused-affordance:hover,
#playerShell .player-paused-affordance:focus-visible{color:#fff;outline:none}
#playerShell .player-paused-affordance svg{display:block;width:100%;height:100%;overflow:visible}
#playerShell .paused-affordance-antenna{
  fill:none;
  stroke:currentColor;
  stroke-width:4.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#playerShell .paused-affordance-screen{fill:currentColor}
#playerShell .paused-affordance-play{fill:#111216}

/* Volume belongs to the right-side utility cluster. JS moves the native
   Video.js panel beside Speed / Subtitles so opening it never shifts time. */
#playerShell .julylearn-volume-utility{
  position:relative!important;
  margin:0!important;
}

@media(max-width:560px){
  #playerShell .player-paused-affordance{
    right:14px;
    bottom:calc(var(--jl-player-control-h) + 13px);
  }
}

/* JulyLearn V12.94 — transport-triggered lesson loads should never fall back
   to TCPlayer's centered big-play button. Next/Previous and lesson-list
   double-click carry an explicit autoplay intent; if browser autoplay is
   rejected, use the same JulyLearn paused-state affordance at the lower right. */
#playerShell.player-autoplay-requested .vjs-big-play-button,
#playerShell.player-use-paused-affordance .vjs-big-play-button{
  display:none!important;
}
#playerShell.player-autoplay-requested .vjs-control-bar,
#playerShell.player-autoplay-requested .tcp-control-bar,
#playerShell.player-use-paused-affordance .vjs-control-bar,
#playerShell.player-use-paused-affordance .tcp-control-bar{
  opacity:1!important;
  visibility:visible!important;
}

/* V12.94: JulyLearn owns the paused-state affordance. Remove TCPlayer's
   separate centered big-play treatment so every paused lesson uses the same
   lower-right resume mark instead of switching visual languages. */
#playerShell .vjs-big-play-button{
  display:none!important;
}


/* JulyLearn V12.99 — compact seek-time hover label.
   TCPlayer/Video.js exposes two time tooltips on hover: one for the mouse
   position and one attached to the current play progress.  Keep only the
   mouse-position label and make it intentionally small so it does not cover
   subtitles.  Thumbnail preview remains disabled/not configured. */
#playerShell .vjs-play-progress .vjs-time-tooltip{
  display:none!important;
  visibility:hidden!important;
}
#playerShell .vjs-progress-control .vjs-mouse-display{
  background:transparent!important;
}
#playerShell .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip{
  min-width:0!important;
  width:max-content!important;
  height:auto!important;
  margin:0!important;
  padding:3px 5px!important;
  top:-25px!important;
  border:0!important;
  border-radius:4px!important;
  background:rgba(18,18,20,.88)!important;
  color:#fff!important;
  box-shadow:0 2px 8px rgba(0,0,0,.24)!important;
  font-family:inherit!important;
  font-size:10px!important;
  font-weight:650!important;
  line-height:1.15!important;
  letter-spacing:0!important;
  text-shadow:none!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
#playerShell .vjs-progress-control:hover .vjs-mouse-display .vjs-time-tooltip,
#playerShell .vjs-progress-control:focus-within .vjs-mouse-display .vjs-time-tooltip,
#playerShell .video-js.vjs-scrubbing .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip{
  display:block!important;
  visibility:visible!important;
}
@media(max-width:560px){
  #playerShell .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip{
    top:-23px!important;
    padding:2px 4px!important;
    font-size:9px!important;
  }
}