/*! @license © 2026 Гореньков М. С. · КарЧоо. Все права защищены. */
.modal.app-intro-video-first { width: 960px; max-width: calc(100% - 32px); overflow-y: auto; background: #fff; }
.app-intro-player-wrap { position: relative; overflow: hidden; border-radius: var(--radius-panel) var(--radius-panel) 0 0; background: #122d28; }
#appIntroPlayer { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #122d28; }
.app-intro-video-error[hidden] { display: none; }
.modal.app-intro .app-intro-video-error { position: absolute; bottom: 12px; left: 16px; right: 16px; margin: 0; padding: 10px 14px; border-radius: 8px; background: #fff; color: #8b352b; font-size: 13px; }
.app-intro-video-first .app-intro-actions { display: grid; grid-template-columns: 125px minmax(0, 1fr) 240px; align-items: center; gap: 16px; padding: 18px 24px; background: #fff; }
.app-intro-video-first .app-intro-actions > .btn { grid-column: 3; grid-row: 1; justify-self: end; min-width: 240px; }
.app-intro-about { grid-column: 1; grid-row: 1; min-width: 0; }
.app-intro-about[open] { grid-column: 1 / -1; grid-row: 1 / span 2; align-self: stretch; }
.app-intro-about[open] summary { padding: 28px 0; }
.app-intro-about summary { width: fit-content; color: #536d66; font-size: 14px; line-height: 20px; cursor: pointer; }
.app-intro-about summary:hover, .app-intro-about a { color: var(--accent); }
.app-intro-about summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
.app-intro-about-copy { margin-top: 16px; padding: 16px 0 4px; border-top: 1px solid #e4ece8; }
.modal.app-intro .app-intro-about h2 { font-size: 19px; line-height: 1.35; white-space: normal; margin-bottom: 10px; }
.modal.app-intro .app-intro-about p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: #536d66; }
.app-intro-about a { font-size: 13px; }

/* Постоянное уведомление между описанием сервиса и началом настройки. */
.app-intro-video-first .app-intro-cookie { grid-column: 2; grid-row: 1; min-height: 76px; display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid #dce8e3; border-radius: 9px; background: #f6f9f7; }
.app-intro-video-first .app-intro-cookie[hidden] { display: none; }
.app-intro-video-first .app-intro-cookie > svg { flex: none; margin-top: 1px; color: #6b8b80; }
.modal.app-intro-video-first .app-intro-cookie p { font-size: 11.5px; line-height: 1.5; color: #5b7069; }

/* Короткое напоминание в начале просмотра; управление плеером остаётся доступным. */
.app-intro-sound-hint { position: absolute; top: 24px; left: 50%; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px); padding: 12px 20px 12px 12px; border: 1px solid #ffffff40; border-radius: 16px; background: #143a32ed; color: #fff; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.3; box-shadow: 0 8px 28px #061c2840; backdrop-filter: blur(12px); cursor: pointer; animation: app-intro-sound-hint 5s both; }
.app-intro-sound-hint[hidden] { display: none; }
.app-intro-sound-hint:hover { background: #194b40f5; }
.app-intro-sound-hint:focus-visible { outline: 3px solid #a3e6d6; outline-offset: 3px; }
.app-intro-sound-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #a3e6d61f; color: #b8f0dc; }
@keyframes app-intro-sound-hint {
  0% { opacity: 0; transform: translate(-50%, -10px); }
  10%, 84% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -5px); }
}
@media (prefers-reduced-motion: reduce) {
  .app-intro-sound-hint { animation: none; transform: translateX(-50%); }
}

/* Закрытие приветствия остаётся заметным поверх обложки и во время просмотра. */
.app-intro-close { position:absolute; z-index:4; top:16px; right:16px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #dce8e3; border-radius:10px; background:#fffffff2; color:#315b52; cursor:pointer; box-shadow:0 2px 8px #102c2820; }
.app-intro-close:hover { background:#fff; color:#007f73; }
.app-intro-close:focus-visible { outline:3px solid #a3e6d6; outline-offset:3px; }
.app-intro-video-first .app-intro-cover-top { padding-right:46px; }