.viewer-page { background: #eef0f3; }
.viewer-page .top-search { grid-template-columns: 28px minmax(0, 1fr) auto; }
.search-go { height: 30px; margin-right: 5px; padding: 0 11px; border-radius: 8px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 800; }

.watch-layout { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 17px; width: min(100%, 1540px); margin: 0 auto; padding: 20px 25px 60px; }
.watch-primary { min-width: 0; }
.watch-project-context { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; margin-bottom:10px; padding:11px 13px; border:1px solid #dbe6f6; border-radius:12px; background:linear-gradient(110deg,#f5f9ff,#fff); box-shadow:0 5px 18px rgba(29,70,125,.055); }
.watch-project-context>span { padding:5px 7px; border-radius:6px; color:#fff; background:#2d7fdf; font-size:7px; font-weight:900; letter-spacing:.08em; }.watch-project-context>div { min-width:0; }.watch-project-context strong,.watch-project-context small { display:block; }.watch-project-context strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.watch-project-context small { margin-top:3px; color:#7b8491; font-size:8px; }.watch-project-context>b { color:#357bc8; font-size:9px; white-space:nowrap; }.watch-project-context:hover { border-color:#b7d2f3; background:#f3f8ff; }
.video-player { position: relative; display: flex; aspect-ratio: 16 / 9; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background-color: #07080b; box-shadow: 0 16px 42px rgba(15, 18, 24, .2); isolation: isolate; transition: border-radius .22s, box-shadow .22s; }
.video-player.has-poster { background-image:var(--player-poster); background-position:center; background-size:cover; }
.video-player.is-playing { background-image: none; }
.video-player.is-playing::before { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 40% 38%, #172544, #090b10 66%); content: ""; }
.player-poster-shade { position: absolute; z-index: -1; inset: 0; background: rgba(4, 6, 10, .18); transition: .25s; }
.video-player.is-playing .player-poster-shade { background: radial-gradient(circle at center, rgba(38, 136, 235, .13), rgba(0, 0, 0, .45)); }
.player-main-button { display: grid; width: 70px; height: 70px; place-items: center; padding-left: 5px; border-radius: 50%; color: #15181e; background: rgba(255, 255, 255, .96); box-shadow: 0 8px 22px rgba(0, 0, 0, .24); font-size: 22px; transition: .2s; }
.player-main-button:hover { transform: scale(1.06); }
.video-player.is-playing .player-main-button { opacity: 0; transform: scale(.75); pointer-events: none; }
.player-status { position: absolute; top: 20px; left: 50%; padding: 7px 11px; border-radius: 8px; opacity: 0; color: #fff; background: rgba(0, 0, 0, .52); font-size: 9px; transform: translateX(-50%); transition: .2s; }
.video-player.is-playing .player-status { opacity: 1; }
.player-controls { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 31px auto minmax(80px, 1fr) 31px 31px 31px 31px; align-items: center; gap: 8px; min-height: 56px; padding: 18px 15px 7px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .86)); }
.player-controls button { width: 30px; height: 30px; border-radius: 7px; color: #fff; background: transparent; }
.player-controls button:hover { background: rgba(255, 255, 255, .14); }
.player-time { font-size: 8px; white-space: nowrap; }
.player-track { height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .36); }
.player-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); }
.player-controls button[data-theater-toggle][aria-pressed="true"] { color:#cfe0ff; background:rgba(91,139,231,.36); }

.viewer-page.is-theater-mode { overflow:hidden; background:#010204; }
.viewer-page.is-theater-mode::before { position:fixed; z-index:190; inset:0; background:radial-gradient(circle at 50% 38%,rgba(35,63,112,.22),transparent 45%),rgba(0,1,3,.97); backdrop-filter:blur(18px); content:""; }
.viewer-page.is-theater-mode .video-player { position:fixed; z-index:200; inset:clamp(8px,2vw,24px); width:auto; height:auto; aspect-ratio:auto; border-color:rgba(130,166,238,.2); border-radius:18px; box-shadow:0 35px 120px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.025); }
.viewer-page.is-theater-mode .player-status { top:24px; }
.viewer-page.is-theater-mode .toast { z-index:220; }

.watch-details { margin-top: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.watch-kicker { margin: 0 0 7px; color: var(--blue); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.watch-details h1 { margin: 0; font-size: clamp(21px, 2.2vw, 31px); line-height: 1.15; letter-spacing: -.035em; }
.watch-stats { margin: 8px 0 0; color: var(--muted); font-size: 9px; }
.quality-text { color: var(--blue); font-weight: 700; }
.watch-actions-row { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.watch-channel { display: flex; align-items: center; gap: 9px; margin-right: 3px; }
.watch-channel strong, .watch-channel small { display: block; white-space: nowrap; }
.watch-channel strong { font-size: 10px; }
.watch-channel small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.primary-action, .secondary-action { min-height: 36px; border-radius: 9px; font-size: 9px; font-weight: 800; }
.primary-action { padding: 0 15px; color: #fff; background: var(--blue); }
.primary-action.is-subscribed { color: #60656e; background: #eef0f3; }
.secondary-action { padding: 0 12px; color: #525761; background: #eef0f3; }
.secondary-action:hover { background: #e3e6ea; }
.secondary-action.is-active { color: var(--blue); background: var(--blue-soft); }
.secondary-action.round { width: 36px; padding: 0; }
.action-spacer { flex: 1; }
.video-description { position: relative; margin-top: 15px; padding: 13px 70px 13px 14px; border-radius: 10px; background: #f4f5f7; }
.video-description p { display: -webkit-box; margin: 0; overflow: hidden; color: #565b64; font-size: 10px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.video-description.is-open p { display: block; }
.video-description button { position: absolute; top: 12px; right: 12px; padding: 4px; color: #4b5058; background: transparent; font-size: 9px; font-weight: 800; }

.comments { margin-top: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.comments-heading { display: flex; align-items: center; justify-content: space-between; }
.comments-heading h2 { margin: 0; font-size: 16px; }
.comments-heading h2 span { color: var(--muted); font-weight: 500; }
.comments-heading button { color: #666b75; background: transparent; font-size: 9px; }
.comment-form { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; align-items: center; margin-top: 18px; }
.comment-form input { height: 39px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #f6f7f8; font-size: 10px; }
.comment-form input:focus { border-color: #acd2f8; background: #fff; }
.comment-form button { height: 36px; padding: 0 13px; border-radius: 9px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 800; }
.comments-list { display: grid; gap: 18px; margin-top: 22px; }
.comments-list article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.comment-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; }
.comments-list strong { display: block; font-size: 9px; }
.comments-list time { margin-left: 5px; color: var(--muted); font-size: 8px; font-weight: 400; }
.comments-list p { margin: 6px 0 7px; color: #4e535c; font-size: 10px; line-height: 1.55; }
.comments-list button { margin-right: 12px; padding: 0; color: #7d828b; background: transparent; font-size: 8px; }

.watch-next { align-self: start; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.next-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.next-heading h2 { margin: 0; font-size: 14px; }
.next-heading label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; }
.next-heading input { accent-color: var(--blue); }
.next-list { display: grid; }
.next-card { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 9px; padding: 9px 0; border-top: 1px solid #eff0f2; }
.next-card:first-child { border-top: 0; }
.next-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; }
.next-thumb.has-poster { background-position:center; background-size:cover; }
.next-thumb time, .next-thumb b { position: absolute; right: 5px; bottom: 5px; padding: 3px 4px; border-radius: 4px; color: #fff; background: rgba(0, 0, 0, .7); font-size: 7px; }
.next-thumb b { right: auto; bottom: auto; top: 5px; left: 5px; background: var(--red); }
.next-card strong { display: -webkit-box; overflow: hidden; font-size: 9px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.next-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 7px; }
.next-card:hover strong { color: var(--blue); }

.share-dialog { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(13, 17, 24, .55); backdrop-filter: blur(5px); }
.share-dialog > div { position: relative; width: min(100%, 430px); padding: 24px; border-radius: 15px; background: #fff; box-shadow: 0 18px 70px rgba(0, 0, 0, .23); }
.share-dialog h2 { margin: 0; font-size: 18px; }
.share-dialog p { margin: 15px 0 7px; color: var(--muted); font-size: 9px; }
.share-dialog label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.share-dialog input { min-width: 0; height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #f6f7f8; font-size: 9px; }
.share-dialog label button { padding: 0 12px; border-radius: 9px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 800; }
.share-close { position: absolute; top: 13px; right: 13px; width: 29px; height: 29px; border-radius: 50%; color: #737883; background: #eff0f3; }

.live-page-grid { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; width: min(100%, 1510px); margin: 0 auto; padding: 20px 25px 60px; }
.live-primary { min-width: 0; }
.live-player { aspect-ratio: 16 / 8.6; }
.broadcast-label { position: absolute; z-index: 4; top: 15px; left: 15px; padding: 5px 8px; border-radius: 6px; color: #fff; background: var(--red); font-size: 8px; font-weight: 800; }
.live-meta { margin-top: 11px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.live-meta > .live-badge { margin-bottom: 8px; }
.live-meta h1 { margin: 0; font-size: clamp(20px, 2vw, 29px); letter-spacing: -.035em; }
.live-meta > p { margin: 8px 0 0; color: var(--muted); font-size: 9px; }
.live-meta > div { display: flex; align-items: center; gap: 9px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }
.live-chat { display: grid; grid-template-rows: auto auto minmax(300px, 1fr) auto; min-height: 540px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.chat-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.chat-tabs button { height: 46px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 700; }
.chat-tabs button.active { color: var(--blue); box-shadow: inset 0 -2px var(--blue); }
.chat-notice { margin: 10px; padding: 9px 10px; border-radius: 8px; color: #7c828c; background: #f2f4f7; font-size: 8px; line-height: 1.4; }
.chat-messages { display: grid; align-content: start; gap: 4px; padding: 6px 12px 12px; overflow-y: auto; }
.chat-messages p { display: grid; grid-template-columns: 25px auto 1fr; align-items: center; gap: 7px; margin: 0; padding: 6px; border-radius: 8px; font-size: 9px; }
.chat-messages p:hover { background: #f5f6f8; }
.chat-messages .comment-avatar { width: 25px; height: 25px; font-size: 7px; }
.chat-messages b { font-size: 8px; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 7px; padding: 10px; border-top: 1px solid var(--line); }
.chat-form input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: #f6f7f8; font-size: 9px; }
.chat-form button { border-radius: 9px; color: #fff; background: var(--blue); }
.live-below { grid-column: 1 / -1; margin-top: 18px; }

.channel-main { grid-column: 2; width: min(100%, 1370px); margin: 0 auto; padding: 20px 28px 60px; }
.channel-hero { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.channel-cover { position: relative; display: flex; aspect-ratio: 16 / 4.25; min-height: 210px; align-items: flex-end; overflow: hidden; padding: 26px; color: #fff; isolation: isolate; }
.channel-cover::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(6, 10, 17, .72), rgba(6, 10, 17, .05)); content: ""; }
.channel-cover > span { font-size: clamp(24px, 3.6vw, 48px); font-weight: 800; line-height: .98; letter-spacing: -.055em; }
.channel-profile { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; gap: 13px; padding: 18px 22px; }
.channel-avatar-hero { display: grid; width: 72px; height: 72px; place-items: center; border: 4px solid #fff; border-radius: 50%; color: #fff; box-shadow: 0 4px 18px rgba(20, 25, 35, .13); font-size: 16px; font-weight: 800; }
.channel-profile h1 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.channel-profile h1 b { color: var(--blue); }
.channel-profile p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }
.channel-tabs { display: flex; gap: 23px; padding: 0 24px; border-top: 1px solid var(--line); overflow-x: auto; }
.channel-tabs a { flex: 0 0 auto; padding: 14px 0 12px; color: #777c85; border-bottom: 2px solid transparent; font-size: 10px; font-weight: 700; }
.channel-tabs a.active { color: var(--blue); border-color: var(--blue); }
.channel-feature { display: grid; grid-template-columns: minmax(310px, 1.2fr) minmax(280px, .8fr); gap: 22px; margin-top: 17px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.feature-thumb { position: relative; display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; border-radius: 12px; }
.feature-thumb > span { display: grid; width: 55px; height: 55px; place-items: center; padding-left: 3px; border-radius: 50%; color: #16191f; background: rgba(255,255,255,.94); font-size: 16px; }
.feature-thumb time { position: absolute; right: 7px; bottom: 7px; padding: 3px 5px; border-radius: 4px; color: #fff; background: rgba(0,0,0,.7); font-size: 8px; }
.channel-feature > div { align-self: center; }
.channel-feature > div > p { margin: 0 0 7px; color: var(--blue); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.channel-feature h2 { margin: 0; font-size: clamp(20px, 2.5vw, 32px); line-height: 1.08; letter-spacing: -.04em; }
.channel-feature small { display: block; margin-top: 8px; color: var(--muted); font-size: 8px; }
.feature-description { margin-top: 15px; color: #5d626b; font-size: 10px; line-height: 1.62; }
.feature-watch { display: inline-flex; align-items: center; justify-content: center; margin-top: 17px; padding: 0 15px; }
.channel-video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.video-info.no-avatar { grid-template-columns: minmax(0, 1fr) 22px; }
.channel-about { margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.channel-about h2 { margin: 0; font-size: 17px; }
.channel-about > p { max-width: 710px; margin: 10px 0 20px; color: #61666f; font-size: 10px; line-height: 1.65; }
.channel-about dl { display: flex; gap: 45px; margin: 0; }
.channel-about dt { color: var(--muted); font-size: 8px; }
.channel-about dd { margin: 4px 0 0; font-size: 13px; font-weight: 800; }

@media (max-width: 1230px) {
  .watch-layout { grid-template-columns: minmax(0, 1fr) 310px; padding-inline: 18px; }
  .next-card { grid-template-columns: 112px minmax(0, 1fr); }
  .secondary-action span { display: none; }
  .channel-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .watch-layout { grid-template-columns: 1fr; }
  .watch-next { order: 2; }
  .next-list { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .watch-actions-row { flex-wrap: wrap; }
  .action-spacer { display: none; }
  .live-page-grid { grid-template-columns: 1fr; }
  .live-chat { min-height: 430px; }
  .channel-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .watch-layout { display: block; padding: 10px 0 30px; }
  .watch-project-context { margin:0 10px 9px; }
  .viewer-page .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .viewer-page .top-search > span, .viewer-page .search-go { display: none; }
  .viewer-page .top-search { grid-template-columns: 1fr; }
  .viewer-page .top-search input { padding: 0 10px; }
  .video-player { border-radius: 0; }
  .watch-details, .comments, .watch-next { margin: 9px 10px 0; padding: 16px; border-radius: 12px; }
  .watch-details h1 { font-size: 20px; }
  .watch-actions-row { display: grid; grid-template-columns: 1fr auto auto auto; }
  .watch-actions-row > .watch-channel { grid-column: 1 / 4; }
  .watch-actions-row > .primary-action { grid-column: 4; grid-row: 1; }
  .watch-actions-row > .secondary-action { min-width: 36px; padding: 0 10px; }
  .watch-actions-row > .secondary-action.round { display: none; }
  .video-description { padding-right: 50px; }
  .comment-form { grid-template-columns: 34px minmax(0, 1fr); }
  .comment-form button { grid-column: 2; width: max-content; }
  .next-list { grid-template-columns: 1fr; }
  .next-card { grid-template-columns: 132px minmax(0, 1fr); }
  .player-main-button { width: 58px; height: 58px; }
  .player-controls { grid-template-columns: 28px auto minmax(40px, 1fr) 28px 28px 28px; }
  .player-controls button[data-volume] { display: none; }
  .viewer-page.is-theater-mode .video-player { inset:0; border:0; border-radius:0; }
  .live-page-grid { display: block; padding: 10px 0 30px; }
  .live-player { border-radius: 0; }
  .live-meta, .live-chat, .live-below { margin: 9px 10px 0; }
  .live-meta > div { flex-wrap: wrap; }
  .live-chat { min-height: 480px; }
  .live-below .live-grid { margin-right: -10px; }
  .channel-main { padding: 10px 10px 35px; }
  .channel-cover { width:calc(100% + 20px); min-height:160px; aspect-ratio:auto; margin:-10px -10px 0; border-radius:0; }
  .channel-profile { grid-template-columns: 58px minmax(0, 1fr) auto; padding: 14px; }
  .channel-avatar-hero { width: 58px; height: 58px; }
  .channel-profile h1 { font-size: 16px; }
  .channel-profile .secondary-action { display: none; }
  .channel-tabs { padding-inline: 14px; }
  .channel-feature { grid-template-columns: 1fr; padding: 12px; }
  .channel-video-grid { grid-template-columns: 1fr; }
  .channel-about dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-player,.player-main-button,.player-poster-shade { transition-duration:.01ms!important; }
}

/* ZoomZon Pro Player */
.video-player {
  min-height:0;
  background:#030508;
  cursor:default;
}
.video-player::after {
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 25%,transparent 63%,rgba(0,0,0,.86));
  content:"";
}
.video-player.has-poster { background-image:var(--player-poster); }
.video-player.is-playing { background-image:none; }
.player-media {
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  background:#030508;
  object-fit:contain;
}
.video-player.has-poster .player-media { background:rgba(3,5,8,.82); }
.player-poster-shade {
  z-index:1;
  background:radial-gradient(circle at 50% 45%,transparent 16%,rgba(0,0,0,.12) 73%,rgba(0,0,0,.48));
  pointer-events:none;
}
.video-player.is-playing .player-poster-shade { background:transparent; }
.player-topline {
  position:absolute;
  z-index:5;
  top:14px;
  right:15px;
  left:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  color:rgba(255,255,255,.86);
  font-size:8px;
  font-weight:760;
  letter-spacing:.02em;
  opacity:1;
  transition:opacity .2s;
}
.player-topline span {
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:7px;
  background:rgba(3,6,11,.46);
  backdrop-filter:blur(12px);
}
.player-topline span:last-child { color:#d5e8ff; background:rgba(49,106,183,.3); }
.player-main-button {
  position:relative;
  z-index:5;
  border:0;
  cursor:pointer;
}
.player-main-button:disabled {
  cursor:not-allowed;
  opacity:.52;
  transform:none!important;
}
.video-player.is-playing .player-main-button {
  opacity:0;
  pointer-events:none;
}
.player-status {
  z-index:7;
  top:21px;
  max-width:min(84%,360px);
  text-align:center;
  opacity:0;
  pointer-events:none;
}
.player-status.is-visible { opacity:1; }
.video-player.is-playing .player-status:not(.is-visible) { opacity:0; }
.player-loading {
  position:absolute;
  z-index:9;
  top:50%;
  left:50%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  color:#fff;
  background:rgba(6,9,15,.74);
  box-shadow:0 12px 35px rgba(0,0,0,.28);
  font-size:9px;
  font-weight:750;
  transform:translate(-50%,-50%);
  backdrop-filter:blur(12px);
}
.player-loading i {
  display:block;
  width:15px;
  height:15px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  border-radius:50%;
  animation:zoomzon-player-spin .7s linear infinite;
}
@keyframes zoomzon-player-spin { to { transform:rotate(360deg); } }
.video-player .player-controls {
  position:absolute;
  z-index:9;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  min-height:62px;
  align-items:center;
  gap:5px;
  padding:23px 13px 8px;
  color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.89));
  opacity:1;
  transform:translateY(0);
  transition:opacity .2s,transform .2s;
}
.video-player:not(.is-controls-visible) .player-controls,
.video-player:not(.is-controls-visible) .player-topline {
  opacity:0;
  pointer-events:none;
}
.video-player:not(.is-controls-visible) .player-controls { transform:translateY(6px); }
.player-controls .player-icon-button {
  display:grid;
  width:31px;
  height:31px;
  flex:0 0 31px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:8px;
  color:#fff;
  background:transparent;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.player-controls .player-icon-button:hover,
.player-controls .player-icon-button:focus-visible,
.player-controls .player-icon-button.is-active {
  color:#fff;
  outline:0;
  background:rgba(255,255,255,.17);
}
.player-controls .player-icon-button[data-player-captions] {
  font-size:8px;
  letter-spacing:-.05em;
}
.player-time {
  width:76px;
  flex:0 0 76px;
  color:rgba(255,255,255,.95);
  font-feature-settings:"tnum";
  font-size:8px;
  text-align:center;
}
.player-seek-wrap {
  position:relative;
  display:flex;
  height:25px;
  min-width:50px;
  flex:1 1 auto;
  align-items:center;
}
.player-seek,
.player-volume-wrap input {
  width:100%;
  height:4px;
  margin:0;
  appearance:none;
  border-radius:8px;
  outline:0;
  cursor:pointer;
}
.player-seek {
  --played:0%;
  --buffered:0%;
  touch-action:none;
  background:linear-gradient(90deg,#77baff 0 var(--played),rgba(255,255,255,.34) var(--played) var(--buffered),rgba(255,255,255,.18) var(--buffered) 100%);
}
.player-seek::-webkit-slider-thumb,
.player-volume-wrap input::-webkit-slider-thumb {
  width:11px;
  height:11px;
  appearance:none;
  border:2px solid #fff;
  border-radius:50%;
  background:#67b4ff;
  box-shadow:0 1px 5px rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .15s,transform .15s;
}
.player-seek:hover::-webkit-slider-thumb,
.player-seek:focus-visible::-webkit-slider-thumb,
.player-volume-wrap:hover input::-webkit-slider-thumb,
.player-volume-wrap input:focus-visible::-webkit-slider-thumb {
  opacity:1;
  transform:scale(1.05);
}
.player-seek::-moz-range-thumb,
.player-volume-wrap input::-moz-range-thumb {
  width:9px;
  height:9px;
  border:2px solid #fff;
  border-radius:50%;
  background:#67b4ff;
}
.player-volume-wrap {
  display:flex;
  width:88px;
  flex:0 0 88px;
  align-items:center;
  gap:2px;
}
.player-volume-wrap input {
  --volume:80%;
  min-width:30px;
  background:linear-gradient(90deg,#fff 0 var(--volume),rgba(255,255,255,.26) var(--volume) 100%);
}
.player-settings {
  position:absolute;
  z-index:15;
  right:80px;
  bottom:55px;
  display:grid;
  width:226px;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:13px;
  color:#f7f8fb;
  background:rgba(17,21,29,.96);
  box-shadow:0 18px 50px rgba(0,0,0,.48);
  backdrop-filter:blur(20px);
}
.player-settings section {
  display:grid;
  gap:3px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.player-settings section:last-of-type { padding-bottom:0; border-bottom:0; }
.player-settings header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:3px;
  padding:3px 4px 4px;
  color:#fff;
  font-size:9px;
  font-weight:850;
}
.player-settings header small { color:#8cbfff; font-size:8px; }
.player-settings section>button {
  display:flex;
  min-height:28px;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  border:0;
  border-radius:7px;
  color:#c3c9d2;
  background:transparent;
  font-size:9px;
  text-align:left;
  cursor:pointer;
}
.player-settings section>button:hover,
.player-settings section>button.is-active {
  color:#fff;
  background:rgba(100,175,255,.16);
}
.player-settings section>button i {
  color:#78beff;
  font-size:8px;
  font-style:normal;
}
.player-settings section>button small { color:#8d95a3; font-size:8px; }
.player-rate-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}
.player-rate-grid button {
  height:28px;
  padding:0;
  border:0;
  border-radius:7px;
  color:#c3c9d2;
  background:rgba(255,255,255,.055);
  font-size:8px;
  cursor:pointer;
}
.player-rate-grid button:hover,
.player-rate-grid button.is-active { color:#fff; background:rgba(100,175,255,.22); }
.player-settings>p {
  margin:0;
  color:#808999;
  font-size:7px;
  line-height:1.4;
}
.video-player.is-unavailable .player-media { display:none; }
.video-player.is-unavailable .player-poster-shade { background:rgba(4,7,12,.5); }
.video-player.is-unavailable .player-controls { opacity:.4; pointer-events:none; }
.video-player.is-unavailable .player-main-button { opacity:.75; }

.viewer-page.is-theater-mode .player-media { object-fit:contain; }
.viewer-page.is-theater-mode .player-settings { bottom:68px; right:94px; }

@media (max-width:680px) {
  .player-topline { top:10px; right:10px; left:10px; }
  .player-topline span { padding:4px 6px; font-size:7px; }
  .video-player .player-controls { min-height:56px; gap:1px; padding:20px 7px 6px; }
  .player-controls .player-icon-button { width:28px; height:28px; flex-basis:28px; font-size:10px; }
  .player-time { width:57px; flex-basis:57px; font-size:7px; }
  .player-volume-wrap { width:28px; flex-basis:28px; }
  .player-volume-wrap input { display:none; }
  .player-controls [data-player-captions],
  .player-controls [data-player-pip] { display:none; }
  .player-settings { right:8px; bottom:49px; width:min(224px,calc(100vw - 16px)); }
  .player-main-button { width:58px; height:58px; }
}

@media (prefers-reduced-motion:reduce) {
  .player-loading i { animation:none; }
  .video-player .player-controls,.player-topline { transition:none!important; }
}

/* ZoomZon Ultra Player */
.video-player [hidden] { display:none!important; }
.video-player {
  --player-accent:#45a4ff;
  --player-accent-soft:#8bd0ff;
  border-color:rgba(139,196,255,.14);
  border-radius:20px;
  background:#020306;
  box-shadow:0 24px 70px rgba(8,17,31,.22),0 0 0 1px rgba(255,255,255,.035) inset;
}
.video-player:focus-visible { outline:3px solid rgba(69,164,255,.32); outline-offset:3px; }
.video-player:not(.is-controls-visible).is-playing { cursor:none; }
.video-player::after {
  z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 23%,transparent 58%,rgba(0,0,0,.95));
}
.player-media { background:radial-gradient(circle at 50% 45%,#121a28,#020306 72%); }
.player-poster-shade { background:linear-gradient(90deg,rgba(2,4,8,.1),rgba(2,4,8,.04)),radial-gradient(circle at 50% 42%,transparent 8%,rgba(0,0,0,.13) 58%,rgba(0,0,0,.62)); }
.player-main-button {
  width:78px;
  height:78px;
  border:1px solid rgba(255,255,255,.68);
  color:#07111d;
  background:linear-gradient(145deg,#fff 18%,#cceaff 68%,#87c7ff);
  box-shadow:0 20px 55px rgba(0,0,0,.45),0 0 0 10px rgba(255,255,255,.08);
  font-size:23px;
  transform:translateZ(0);
}
.player-main-button:hover { box-shadow:0 24px 65px rgba(0,0,0,.5),0 0 0 14px rgba(109,185,255,.13); transform:scale(1.055); }
.player-topline { top:16px; right:18px; left:18px; }
.player-topline>span,.player-topline>div>span {
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  color:rgba(255,255,255,.82);
  background:rgba(7,11,18,.48);
  box-shadow:0 7px 24px rgba(0,0,0,.14);
  font-size:8px;
  backdrop-filter:blur(16px) saturate(135%);
}
.player-topline>div { display:flex; gap:6px; }
.player-topline>div>span:first-child::before { width:5px; height:5px; margin-right:6px; border-radius:50%; background:#68e3b5; box-shadow:0 0 0 4px rgba(104,227,181,.11); content:""; }
.player-topline>div>span:last-child { color:#dff1ff; background:rgba(35,111,187,.38); }
.player-status {
  top:54px;
  min-height:32px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(7,10,16,.66);
  box-shadow:0 10px 35px rgba(0,0,0,.24);
  font-weight:750;
  backdrop-filter:blur(16px);
}
.video-player .player-controls {
  z-index:10;
  display:grid;
  grid-template-rows:22px 40px;
  gap:1px;
  min-height:86px;
  padding:15px 17px 9px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.54) 26%,rgba(2,4,8,.94));
}
.player-seek-wrap {
  position:relative;
  z-index:2;
  width:100%;
  height:28px;
  min-width:0;
  align-items:center;
}
.player-seek { position:relative; z-index:2; height:6px; transition:height .14s,filter .14s; }
.player-seek-wrap:hover .player-seek,.player-seek:focus-visible { height:6px; filter:brightness(1.12); }
.player-seek {
  background:linear-gradient(90deg,var(--player-accent-soft) 0 var(--played),rgba(255,255,255,.38) var(--played) var(--buffered),rgba(255,255,255,.18) var(--buffered) 100%);
  box-shadow:0 1px 8px rgba(0,0,0,.24);
}
.player-seek::-webkit-slider-thumb { width:13px; height:13px; background:#fff; box-shadow:0 0 0 4px rgba(69,164,255,.24),0 3px 8px rgba(0,0,0,.4); }
.player-seek-preview {
  position:absolute;
  z-index:6;
  bottom:24px;
  display:grid;
  min-width:54px;
  min-height:29px;
  place-items:center;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  color:#fff;
  background:rgba(7,11,18,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.38);
  font-size:8px;
  transform:translateX(-50%);
  pointer-events:none;
  backdrop-filter:blur(14px);
}
.player-seek-preview::after { position:absolute; bottom:-4px; width:8px; height:8px; background:inherit; transform:rotate(45deg); content:""; }
.player-seek-preview b { position:relative; z-index:1; font-feature-settings:"tnum"; }
.player-chapter-marks { position:absolute; z-index:3; right:0; left:0; height:6px; pointer-events:none; }
.player-chapter-marks i { position:absolute; top:50%; width:2px; height:8px; border-radius:2px; background:rgba(3,6,10,.88); transform:translate(-1px,-50%); }
.player-control-row { display:flex; min-width:0; align-items:center; gap:9px; }
.player-control-group { display:flex; min-width:0; align-items:center; gap:3px; }
.player-control-spacer { display:flex; min-width:15px; flex:1 1 auto; justify-content:center; overflow:hidden; }
.player-current-chapter { overflow:hidden; padding:5px 9px; border:1px solid rgba(255,255,255,.1); border-radius:99px; color:rgba(255,255,255,.67); background:rgba(255,255,255,.055); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.player-controls .player-icon-button {
  width:34px;
  height:34px;
  flex-basis:34px;
  border:1px solid transparent;
  border-radius:10px;
  font-size:12px;
  transition:background .15s,border-color .15s,transform .15s;
}
.player-controls .player-icon-button:hover,.player-controls .player-icon-button:focus-visible,.player-controls .player-icon-button.is-active { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.13); transform:translateY(-1px); }
.player-controls .player-play-button { color:#0a1320; background:linear-gradient(145deg,#eaf7ff,#92ceff); }
.player-controls .player-play-button:hover { color:#07111d; background:linear-gradient(145deg,#fff,#a8d9ff); }
.player-controls .player-skip-button { color:#dfe7f1; font-size:7px; font-weight:900; }
.player-time { width:auto; min-width:88px; flex:0 0 auto; padding-inline:4px; color:rgba(255,255,255,.8); font-size:8px; text-align:left; }
.player-volume-wrap { width:108px; flex-basis:108px; gap:2px; }
.player-volume-wrap input { height:3px; }
.player-volume-wrap input::-webkit-slider-thumb { width:10px; height:10px; background:#fff; }
.player-settings {
  right:65px;
  bottom:77px;
  width:252px;
  gap:10px;
  padding:12px;
  border-color:rgba(151,201,255,.2);
  border-radius:16px;
  background:linear-gradient(155deg,rgba(20,27,39,.98),rgba(9,13,20,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.56),0 0 0 1px rgba(255,255,255,.025) inset;
}
.player-settings-title { display:flex; align-items:center; justify-content:space-between; padding:1px 3px 7px; border-bottom:1px solid rgba(255,255,255,.08); color:#fff; font-size:11px; font-weight:850; }
.player-settings-title button { width:auto!important; height:25px!important; padding:0 8px!important; border:1px solid rgba(255,255,255,.1)!important; border-radius:7px!important; color:#a9cfff!important; background:rgba(79,142,211,.12)!important; font-size:7px!important; }
.player-rate-grid { grid-template-columns:repeat(4,1fr); }
.player-settings section>button,.player-rate-grid button { min-height:30px; }
.player-shortcuts {
  position:absolute;
  z-index:18;
  top:50%;
  left:50%;
  width:min(430px,calc(100% - 32px));
  padding:16px;
  border:1px solid rgba(151,201,255,.2);
  border-radius:18px;
  color:#fff;
  background:linear-gradient(145deg,rgba(17,23,34,.97),rgba(7,10,16,.97));
  box-shadow:0 32px 90px rgba(0,0,0,.66);
  transform:translate(-50%,-50%);
  backdrop-filter:blur(24px);
}
.player-shortcuts header { display:flex; align-items:center; justify-content:space-between; padding-bottom:11px; border-bottom:1px solid rgba(255,255,255,.09); }
.player-shortcuts header strong { font-size:13px; }
.player-shortcuts header button { width:28px; height:28px; border-radius:8px; color:#fff; background:rgba(255,255,255,.08); }
.player-shortcuts dl { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; margin:11px 0 0; }
.player-shortcuts dl>div { display:flex; min-height:34px; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid rgba(255,255,255,.055); }
.player-shortcuts dt { color:#f1f6fb; font-size:8px; font-weight:850; }
.player-shortcuts dd { margin:0; color:#8996a7; font-size:8px; }
.player-up-next {
  position:absolute;
  z-index:12;
  top:50%;
  right:clamp(18px,5vw,70px);
  display:grid;
  width:min(330px,calc(100% - 36px));
  gap:7px;
  padding:20px;
  border:1px solid rgba(151,201,255,.2);
  border-radius:17px;
  color:#fff;
  background:linear-gradient(145deg,rgba(18,25,37,.94),rgba(6,9,15,.94));
  box-shadow:0 28px 80px rgba(0,0,0,.56);
  transform:translateY(-50%);
  backdrop-filter:blur(22px);
}
.player-up-next>small { color:#76bdff; font-size:7px; font-weight:900; letter-spacing:.16em; }
.player-up-next>strong { font-size:18px; line-height:1.15; letter-spacing:-.035em; }
.player-up-next>span { color:#8f99a8; font-size:8px; }
.player-up-next>div { display:flex; gap:7px; margin-top:7px; }
.player-up-next button { min-height:35px; padding:0 11px; border-radius:9px; color:#dce5ee; background:rgba(255,255,255,.08); font-size:8px; font-weight:850; }
.player-up-next button:first-child { color:#07111d; background:linear-gradient(145deg,#eaf7ff,#88c8ff); }
.video-player:fullscreen { border:0; border-radius:0; }
.video-player:fullscreen .player-controls { padding-inline:clamp(18px,3vw,48px); padding-bottom:clamp(11px,2vw,26px); }

@media (max-width:900px) {
  .player-current-chapter { display:none; }
  .player-control-spacer { min-width:0; }
  .player-volume-wrap { width:86px; flex-basis:86px; }
  .player-controls .player-skip-button { display:none; }
}
@media (max-width:680px) {
  .video-player { border-radius:0; }
  .player-main-button { width:62px; height:62px; box-shadow:0 16px 45px rgba(0,0,0,.42),0 0 0 8px rgba(255,255,255,.08); }
  .player-topline { top:9px; right:9px; left:9px; }
  .player-topline>span,.player-topline>div>span { min-height:24px; padding:0 7px; font-size:6px; }
  .player-topline>div>span:first-child { display:none; }
  .player-status { top:40px; min-height:28px; font-size:7px; }
  .video-player .player-controls { grid-template-rows:28px 36px; min-height:76px; padding:8px 7px 5px; }
  .player-seek-wrap { height:28px; }
  .player-control-row { gap:1px; }
  .player-controls .player-icon-button,.player-clip-button { width:34px; height:34px; min-height:34px; flex-basis:34px; border-radius:9px; font-size:11px; }
  .player-time { min-width:67px; padding:0 3px; font-size:8px; }
  .player-volume-wrap { width:34px; flex-basis:34px; }
  .player-volume-wrap input,.player-controls [data-player-pip],.player-controls [data-theater-toggle],.player-controls [data-player-airplay] { display:none!important; }
  .player-control-left,.player-control-right { gap:0; }
  .player-settings { right:7px; bottom:61px; width:min(252px,calc(100vw - 14px)); max-height:calc(100% - 70px); overflow:auto; }
  .player-shortcuts { padding:12px; border-radius:14px; }
  .player-shortcuts dl { grid-template-columns:1fr; }
  .player-shortcuts dl>div { min-height:29px; }
  .player-up-next { right:50%; width:min(310px,calc(100% - 24px)); padding:15px; transform:translate(50%,-50%); }
  .player-up-next>strong { font-size:15px; }
}
@media (max-width:420px) {
  .player-controls [data-player-captions] { display:none; }
  .player-time { min-width:61px; }
  .player-settings-title button { display:none; }
}

/* ZoomZon Next — young audience layer */
.video-player {
  --player-accent:#7c5cff;
  --player-accent-soft:#4de4ff;
  --player-hot:#ff4fcd;
  container-name:zzplayer;
  container-type:inline-size;
  border-color:rgba(117,105,255,.28);
  background:radial-gradient(circle at 82% 12%,rgba(113,75,255,.16),transparent 34%),#020306;
  box-shadow:0 26px 78px rgba(18,22,45,.28),0 0 0 1px rgba(84,225,255,.045) inset;
}
.video-player::before { position:absolute; z-index:-3; inset:-1px; border-radius:inherit; background:linear-gradient(115deg,rgba(77,228,255,.2),transparent 31%,transparent 67%,rgba(255,79,205,.22)); content:""; pointer-events:none; }
.player-main-button {
  border-radius:24px;
  color:#fff;
  background:linear-gradient(135deg,#4de4ff 0%,#795cff 49%,#ff4fcd 100%);
  background-size:180% 180%;
  box-shadow:0 22px 65px rgba(70,46,211,.45),0 0 0 9px rgba(255,255,255,.075);
  animation:player-zoomer-gradient 5s ease infinite;
}
.player-main-button:hover { box-shadow:0 25px 72px rgba(77,64,221,.52),0 0 0 13px rgba(90,222,255,.11); }
.player-seek { background:linear-gradient(90deg,#4de4ff 0%,#765cff var(--played),rgba(255,255,255,.38) var(--played) var(--buffered),rgba(255,255,255,.17) var(--buffered) 100%); }
.player-seek::-webkit-slider-thumb { background:#fff; box-shadow:0 0 0 4px rgba(124,92,255,.3),0 3px 8px rgba(0,0,0,.42); }
.player-controls .player-play-button { color:#fff; background:linear-gradient(135deg,#4dceff,#765cff 62%,#b54dff); box-shadow:0 7px 22px rgba(93,80,255,.26); }
.player-controls .player-play-button:hover { color:#fff; background:linear-gradient(135deg,#69dcff,#8970ff 62%,#cf66ff); }
.player-topline>div>span:first-child::before { background:#a9ff75; box-shadow:0 0 0 4px rgba(169,255,117,.12),0 0 12px rgba(169,255,117,.5); }
.player-topline>div>span:last-child { color:#ecf9ff; background:linear-gradient(110deg,rgba(46,182,222,.3),rgba(115,73,219,.36)); }
.player-current-chapter { border-color:rgba(107,213,255,.14); background:linear-gradient(110deg,rgba(53,169,221,.09),rgba(126,72,228,.1)); }
.player-clip-button {
  display:flex;
  min-height:32px;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border:1px solid rgba(115,212,255,.2);
  border-radius:10px;
  color:#eafaff;
  background:linear-gradient(120deg,rgba(54,187,229,.14),rgba(128,72,224,.18));
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
  transition:.15s;
}
.player-clip-button:hover,.player-clip-button:focus-visible { border-color:rgba(120,221,255,.38); outline:0; background:linear-gradient(120deg,rgba(54,187,229,.25),rgba(148,73,229,.28)); transform:translateY(-1px); }
.player-settings { border-color:rgba(114,111,255,.24); background:linear-gradient(150deg,rgba(18,25,39,.98),rgba(17,10,31,.98)); }
.player-settings section>button:hover,.player-settings section>button.is-active,.player-rate-grid button:hover,.player-rate-grid button.is-active { background:linear-gradient(110deg,rgba(59,198,235,.14),rgba(127,81,235,.2)); }

@container zzplayer (max-width:760px) {
  .player-current-chapter { display:none; }
  .player-control-spacer { min-width:0; }
  .player-control-row { gap:2px; }
  .player-controls .player-skip-button { display:none; }
  .player-volume-wrap { width:34px; flex-basis:34px; }
  .player-volume-wrap input { display:none; }
  .player-time { min-width:67px; padding-inline:3px; }
  .player-clip-button { width:34px; min-width:34px; padding:0; justify-content:center; }
  .player-clip-button span { display:none; }
}
@container zzplayer (max-width:520px) {
  .player-controls [data-player-captions],
  .player-controls [data-player-pip],
  .player-controls [data-theater-toggle],
  .player-controls [data-player-airplay] { display:none!important; }
}
@media (min-width:681px) and (max-width:1500px) {
  .player-current-chapter { display:none; }
  .player-control-spacer { min-width:0; }
  .player-control-row { gap:2px; }
  .player-controls .player-skip-button { display:none; }
  .player-volume-wrap { width:34px; flex-basis:34px; }
  .player-volume-wrap input { display:none; }
  .player-time { min-width:67px; padding-inline:3px; }
  .player-clip-button { width:34px; min-width:34px; padding:0; justify-content:center; }
  .player-clip-button span { display:none; }
}
.player-gesture-feedback {
  position:absolute;
  z-index:11;
  top:50%;
  display:grid;
  width:88px;
  height:88px;
  place-content:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  opacity:0;
  color:#fff;
  background:linear-gradient(145deg,rgba(77,228,255,.2),rgba(124,92,255,.45));
  box-shadow:0 20px 55px rgba(0,0,0,.35);
  transform:translateY(-50%) scale(.72);
  pointer-events:none;
  backdrop-filter:blur(16px);
}
.player-gesture-left { left:15%; }.player-gesture-right { right:15%; }
.player-gesture-feedback b { font-size:17px; text-align:center; }.player-gesture-feedback span { color:rgba(255,255,255,.65); font-size:7px; text-align:center; }
.player-gesture-feedback.is-visible { animation:player-gesture-pop .52s ease both; }
@keyframes player-zoomer-gradient { 0%,100% { background-position:0 50%; } 50% { background-position:100% 50%; } }
@keyframes player-gesture-pop { 0% { opacity:0; transform:translateY(-50%) scale(.62); } 34% { opacity:1; transform:translateY(-50%) scale(1.06); } 100% { opacity:0; transform:translateY(-50%) scale(1.18); } }
@media (max-width:680px) {
  .player-clip-button { width:30px; min-height:30px; justify-content:center; padding:0; border-radius:8px; }
  .player-clip-button span { display:none; }
  .player-gesture-feedback { width:72px; height:72px; }
  .player-gesture-left { left:10%; }.player-gesture-right { right:10%; }
}
@media (prefers-reduced-motion:reduce) {
  .player-main-button,.player-gesture-feedback.is-visible { animation:none; }
}

/* Native-looking player glyphs without emoji fallbacks on iOS. */
.player-main-button,.player-controls .player-play-button { position:relative; padding:0; font-size:0; }
.player-main-button::before,.video-player:not(.is-playing) .player-controls .player-play-button::before { display:block; width:0; height:0; margin-left:3px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid currentColor; content:""; }
.video-player:not(.is-playing) .player-controls .player-play-button::before { margin-left:2px; border-top-width:5px; border-bottom-width:5px; border-left-width:8px; }
.video-player.is-playing .player-controls .player-play-button::before,.video-player.is-playing .player-controls .player-play-button::after { display:block; width:3px; height:12px; border-radius:2px; background:currentColor; content:""; }
.video-player.is-playing .player-controls .player-play-button::before { transform:translateX(-3px); }
.video-player.is-playing .player-controls .player-play-button::after { position:absolute; left:calc(50% + 3px); }
.player-controls [data-player-mute] { position:relative; font-size:0; }
.player-controls [data-player-mute]::before { width:12px; height:11px; background:currentColor; clip-path:polygon(0 30%,35% 30%,100% 0,100% 100%,35% 70%,0 70%); content:""; }
.player-controls [data-player-mute]::after { width:6px; height:10px; margin-left:1px; border:1.5px solid currentColor; border-left:0; border-radius:0 9px 9px 0; content:""; }
.player-controls [data-player-mute][aria-label="Включить звук"]::after { width:10px; height:2px; margin:0 0 0 -9px; border:0; border-radius:2px; background:currentColor; transform:rotate(-45deg); }
@media (max-width:680px) {
  .player-main-button { width:60px; height:60px; border-radius:50%; box-shadow:0 16px 45px rgba(0,0,0,.42),0 0 0 7px rgba(255,255,255,.075); }
  .player-main-button::before { border-top-width:7px; border-bottom-width:7px; border-left-width:11px; }
  .player-controls .player-play-button { border-radius:10px; }
}