/*! @license © 2026 Гореньков М. С. · КарЧоо. Все права защищены. */
/* Общая обложка видео в приложении и на главной. Единица = 1/960 ширины. */
.app-intro-video-start { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: calc(20 * var(--video-cover-unit, 1px)); width: 100%; padding: calc(30 * var(--video-cover-unit, 1px)) calc(42 * var(--video-cover-unit, 1px)) calc(32 * var(--video-cover-unit, 1px)); border: 0; border-radius: inherit; background: #122d28; color: #fff; font: inherit; line-height: 1.4; text-align: left; cursor: pointer; }
.app-intro-cover-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.app-intro-video-start::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #061e1df5, transparent 65%), linear-gradient(90deg, #082d29f2 0%, #082d29d9 38%, #082d2933 75%, #082d291a); }
.app-intro-video-start > span { position: relative; z-index: 1; }
.app-intro-video-start[hidden] { display: none; }
.app-intro-video-start:focus-visible { outline: none; }
.app-intro-video-start:focus-visible .app-intro-video-play { outline: calc(3 * var(--video-cover-unit, 1px)) solid #a3e6d6; outline-offset: calc(6 * var(--video-cover-unit, 1px)); }
.app-intro-cover-top { display: flex; align-items: center; justify-content: space-between; }
.app-intro-cover-kicker { display: flex; align-items: center; gap: calc(9 * var(--video-cover-unit, 1px)); padding: calc(9 * var(--video-cover-unit, 1px)) calc(12 * var(--video-cover-unit, 1px)); border: calc(1 * var(--video-cover-unit, 1px)) solid #ffffff33; border-radius: calc(8 * var(--video-cover-unit, 1px)); background: #092d2980; color: #e5f5ed; font-size: calc(12 * var(--video-cover-unit, 1px)); font-weight: 600; letter-spacing: calc(1 * var(--video-cover-unit, 1px)); text-transform: uppercase; }
.app-intro-duration { padding: calc(6 * var(--video-cover-unit, 1px)) calc(9 * var(--video-cover-unit, 1px)); border-radius: calc(6 * var(--video-cover-unit, 1px)); background: #081b20bb; color: #fff; font-size: calc(13 * var(--video-cover-unit, 1px)); font-weight: 600; font-variant-numeric: tabular-nums; }
.app-intro-cover-main { display: grid; grid-template-columns: minmax(0, 1fr) calc(270 * var(--video-cover-unit, 1px)); align-items: center; gap: calc(24 * var(--video-cover-unit, 1px)); }
.app-intro-video-copy { display: flex; flex-direction: column; gap: calc(20 * var(--video-cover-unit, 1px)); }
.app-intro-video-copy strong { color: #fff; font-size: calc(38 * var(--video-cover-unit, 1px)); font-weight: 700; line-height: 1.14; letter-spacing: calc(-.8 * var(--video-cover-unit, 1px)); text-shadow: 0 calc(2 * var(--video-cover-unit, 1px)) calc(14 * var(--video-cover-unit, 1px)) #061b2833; }
.app-intro-video-copy > span { color: #deeee7; font-size: calc(14 * var(--video-cover-unit, 1px)); line-height: 1.5; }
.app-intro-watch { display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--video-cover-unit, 1px)); color: #fff; }
.app-intro-video-play { position: relative; display: grid; place-items: center; flex: none; width: calc(104 * var(--video-cover-unit, 1px)); height: calc(104 * var(--video-cover-unit, 1px)); padding-left: calc(7 * var(--video-cover-unit, 1px)); border: calc(1 * var(--video-cover-unit, 1px)) solid #fff; border-radius: 50%; background: #fffffff2; color: #195b48; box-shadow: 0 0 0 calc(10 * var(--video-cover-unit, 1px)) #ffffff1f, 0 calc(12 * var(--video-cover-unit, 1px)) calc(32 * var(--video-cover-unit, 1px)) #061b2866; transition: background .2s, transform .2s; animation: video-cover-breathe 2.8s ease-in-out infinite; }
.app-intro-video-play::before, .app-intro-video-play::after { content: ''; position: absolute; inset: calc(-1 * var(--video-cover-unit, 1px)); border: calc(2 * var(--video-cover-unit, 1px)) solid #e0fff4; border-radius: 50%; pointer-events: none; opacity: 0; animation: video-cover-ripple 2.8s ease-out infinite; }
.app-intro-video-play::after { animation-delay: 1.4s; }
.app-intro-video-start:hover .app-intro-video-play { background: #fff; }
@keyframes video-cover-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes video-cover-ripple { 0% { opacity: .65; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.55); } }
.app-intro-watch > span:last-child { padding: calc(8 * var(--video-cover-unit, 1px)) calc(15 * var(--video-cover-unit, 1px)); border: calc(1 * var(--video-cover-unit, 1px)) solid #ffffff40; border-radius: calc(8 * var(--video-cover-unit, 1px)); background: #092d29d9; font-size: calc(17 * var(--video-cover-unit, 1px)); font-weight: 600; }
.app-intro-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--video-cover-unit, 1px)); width: 100%; padding-top: calc(23 * var(--video-cover-unit, 1px)); border-top: calc(1 * var(--video-cover-unit, 1px)) solid #bfe8d52e; }
.app-intro-step { position: relative; display: flex; align-items: center; gap: calc(11 * var(--video-cover-unit, 1px)); min-width: 0; }
.app-intro-step:not(:last-child)::after { content: '→'; position: absolute; right: calc(1 * var(--video-cover-unit, 1px)); color: #8fbaa9; font-size: calc(19 * var(--video-cover-unit, 1px)); }
.app-intro-step-number { display: grid; place-items: center; flex: none; width: calc(33 * var(--video-cover-unit, 1px)); height: calc(33 * var(--video-cover-unit, 1px)); border: calc(1 * var(--video-cover-unit, 1px)) solid #9fd9bf66; border-radius: calc(10 * var(--video-cover-unit, 1px)); color: #c4f2da; font-size: calc(14 * var(--video-cover-unit, 1px)); font-weight: 600; background: #c4f2da0a; }
.app-intro-step b { display: block; color: #f2faf6; font-size: calc(14 * var(--video-cover-unit, 1px)); font-weight: 600; line-height: 1.3; }
.app-intro-step > span:last-child > span { display: block; margin-top: calc(5 * var(--video-cover-unit, 1px)); color: #accabd; font-size: calc(11 * var(--video-cover-unit, 1px)); line-height: 1.3; }
.app-intro-cover-kicker svg { flex: none; width: calc(20 * var(--video-cover-unit, 1px)); height: calc(16 * var(--video-cover-unit, 1px)); }
.app-intro-video-play svg { width: calc(30 * var(--video-cover-unit, 1px)); height: calc(34 * var(--video-cover-unit, 1px)); }
@media (prefers-reduced-motion: reduce) { .app-intro-video-play { animation: none; transition: none; } .app-intro-video-play::before, .app-intro-video-play::after { animation: none; } }

/* Шаг 7: видео вместо трёх карточек с инструкциями. */
#calibBackdrop .calib7-video { position:relative; flex:1; min-height:0; overflow:hidden; border:1px solid #b7d7cd; border-radius:12px; background:#122d28; --video-cover-unit:.8px; }
#calibBackdrop .calib7-video-cover { padding:24px 30px; animation:none; box-shadow:none; }
#calibBackdrop .calib7-video-cover .app-intro-cover-frame { object-position:65% center; }
#calibBackdrop .calib7-video-cover .app-intro-cover-main { grid-template-columns:minmax(0,1fr) 200px; gap:20px; }
#calibBackdrop .calib7-video-cover .app-intro-video-copy strong { font-size:32px; }
#calibBackdrop .calib7-video-cover .app-intro-video-copy > span { font-size:15px; }
#calibBackdrop .calib7-video-caption { color:#d5e9e1; font-size:13px; line-height:1.5; }
#calibBackdrop .calib7-video-cover:not(.video-course-unseen) .app-intro-video-play,
#calibBackdrop .calib7-video-cover:not(.video-course-unseen) .app-intro-video-play::before,
#calibBackdrop .calib7-video-cover:not(.video-course-unseen) .app-intro-video-play::after { animation:none; }

/* Встроенное воспроизведение на шаге 7, в нижней части левой колонки. */
#step7InlinePlayer { display:block; width:100%; height:100%; object-fit:contain; background:#122d28; }
#calibBackdrop .calib7-video-cover .app-intro-cover-frame { object-position:center; }
#step7InlineSound { position:absolute; top:14px; left:50%; transform:translateX(-50%); padding:10px 16px; border:1px solid #b7d7cd; border-radius:10px; background:#fff; color:#195b48; cursor:pointer; font:inherit; }
#step7InlineSound[hidden], #step7InlineError[hidden] { display:none; }
#step7InlineError { position:absolute; bottom:10px; left:16px; right:16px; padding:9px 12px; border-radius:8px; background:#fff; color:#8b352b; font-size:13px; }

/* Видео шага 7 сохраняет пропорции кадра, свободная высота отдана полям. */
#calibBackdrop .calib7-video { flex:0 0 auto; width:100%; aspect-ratio:16/9; border:0; background:#000; }
#step7InlinePlayer { background:#000; }
#calibBackdrop .calib7-listcol { flex:1; max-height:none; min-height:0; display:flex; flex-direction:column; overflow:visible; }
#calibBackdrop .calib-list { flex:1; min-height:0; grid-auto-rows:minmax(0,1fr); }
#calibBackdrop .calib-list.cols2 { display:grid; columns:auto; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); grid-auto-flow:column; }
#calibBackdrop .calib-list li { display:flex; align-items:center; padding:5px 24px 5px 10px; margin:0; min-height:0; }
#calibBackdrop .calib-list .calib-li-name { font-size:14px; }
#calibBackdrop .calib-list li.sel::after { top:50%; transform:translateY(-50%); }

/* Шаг 7: компактная перемотка полного курса. */
#calibBackdrop .calib7-video { aspect-ratio:auto; border:1px solid #c6ddd7; background:#fff; }
.calib7-video-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
.step7-inline-controls { display:flex; align-items:center; gap:10px; padding:7px 10px; background:#f4f9f7; color:#305c54; }
.step7-inline-controls[hidden] { display:none; }
.step7-inline-controls button { flex:none; min-height:28px; padding:3px 7px; border:0; border-radius:6px; background:transparent; color:#08796e; font:inherit; font-size:12px; cursor:pointer; }
.step7-inline-controls button:hover { background:#dceee8; }
#step7InlineToggle { width:28px; background:#08796e; color:white; }
#step7InlineTime { flex:none; font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#step7InlineSeek { appearance:none; flex:1; min-width:40px; width:0; height:22px; min-height:0; padding:0; margin:0; border:0; background:linear-gradient(to right,#08796e var(--fragment-progress,0%),#c9dfd7 var(--fragment-progress,0%)) center / 100% 4px no-repeat; cursor:pointer; }
#step7InlineSeek::-webkit-slider-thumb { appearance:none; width:13px; height:13px; border:2px solid #08796e; border-radius:50%; background:white; }
#step7InlineSeek::-moz-range-thumb { width:10px; height:10px; border:2px solid #08796e; border-radius:50%; background:white; }
.step7-inline-controls :focus-visible { outline:2px solid #08796e; outline-offset:2px; }
#calibBackdrop .calib7-video:fullscreen { display:flex; flex-direction:column; width:100%; height:100%; border:0; border-radius:0; background:#000; }
.calib7-video:fullscreen .calib7-video-frame { flex:1; min-height:0; aspect-ratio:auto; }
.calib7-video:fullscreen .step7-inline-controls { flex:none; }

/* Версия 2.0: подписи входят в изображение обложки. */
.app-intro-video-start.video-cover-v2,
#calibBackdrop .calib7-video-cover.video-cover-v2 { padding:0; display:block; background:#173f37; }
.video-cover-v2::before, .video-cover-v2::after { display:none; }
.video-cover-v2 .app-intro-cover-frame { object-fit:contain; object-position:center; opacity:1; filter:none; }
.video-cover-action { position:absolute; left:50%; bottom:6%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:12px 20px; border:1px solid #fff9; border-radius:12px; background:#073f38ed; color:white; font-size:16px; font-weight:700; white-space:nowrap; box-shadow:0 4px 18px #0003; }
.video-cover-v2:hover .video-cover-action { background:#08796e; }
.calib7-video-cover .video-cover-action { font-size:13px; padding:9px 14px; }
.video-cover-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.video-course-navigation[hidden], .app-intro-video-start.video-cover-v2[hidden], #calibBackdrop .calib7-video-cover.video-cover-v2[hidden] { display:none; }
.app-intro-video-start.video-cover-v2 > .video-cover-action { position:absolute; }
.video-cover-v2:focus-visible .video-cover-action { outline:3px solid #a3e6d6; outline-offset:3px; }