/* ============================================================================ pb_song_light.css — светлый Apple-скин для режима «Песня» Drumix Дизайн-референс: design_handoff_drum_helper («Помощник барабанщика.dc.html»). ПРИНЦИП БЕЗОПАСНОСТИ: - ВСЁ скоупится под body.pb-song-mode.pb-skin-light — конструктор GrooveScribe (оранжевая тема) НЕ затрагивается. Флаг pb-skin-light на = kill-switch: убрать класс → мгновенный откат к старому виду. - Логику/id/onclick не трогаем (это только внешний вид и раскладка). Токены дизайна: фон #f5f5f7 · карточки #fff · текст #1d1d1f / #6e6e73 / #86868b / #a1a1a6 акцент var(--accent,#0071e3) · зелёный #34c759 · хейрлайн rgba(0,0,0,.06..08) шрифт -apple-system / SF Pro · радиусы 8–18px ============================================================================ */ :root { --accent: #0071e3; } /* Новые светлые элементы по умолчанию скрыты — показываются только в режиме Песня со скином */ .pbLight { display: none; } /* ===================== ШАГ 1 · СВЕТЛАЯ ШАПКА (TopNav) ===================== */ /* Сама полоса шапки: белая, 64px, нижний хейрлайн (перебиваем оранжевую/фиолетовую тему) */ body.pb-song-mode.pb-skin-light #TopNav { display: flex; align-items: center; gap: 18px; height: 64px; min-height: 64px; padding: 0 22px; box-sizing: border-box; width: 100%; max-width: 100%; /* padding внутрь — иначе правый край (бургер) вылезает за вьюпорт */ background: rgba(255,255,255,.92); background-image: none; border-bottom: 1px solid rgba(0,0,0,.06); box-shadow: none; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } /* прячем конструкторские части шапки в режиме Песня */ body.pb-song-mode.pb-skin-light #TopNav #logoTextUpperLeft, body.pb-song-mode.pb-skin-light #TopNav #upperLeft, body.pb-song-mode.pb-skin-light #TopNav #metronomeContainer, body.pb-song-mode.pb-skin-light #upperRight #reloadHelperBtn, body.pb-song-mode.pb-skin-light #upperRight #groovesAnchor { display: none !important; } /* показываем светлые элементы */ body.pb-song-mode.pb-skin-light #pbLightBrand { display: flex; align-items: center; flex: 0 0 auto; width: 168px; height: 42px; overflow: hidden; } body.pb-song-mode.pb-skin-light #pbLightTitle { display: flex; } body.pb-song-mode.pb-skin-light .pbBrandLogo { display: block; width: auto; max-width: none; height: 40px; } /* центральный переключатель песни */ body.pb-song-mode.pb-skin-light #pbLightTitle { flex: 1 1 clamp(220px, 24vw, 430px); min-width: clamp(180px, 20vw, 280px); max-width: 430px; flex-direction: column; align-items: flex-start; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 6px 10px; border-radius: 9px; gap: 1px; text-align: left; } body.pb-song-mode.pb-skin-light #pbLightTitle:hover { background: #f0f0f2; } body.pb-song-mode.pb-skin-light .pbLightTitleMain { display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0; font: 600 16px/1.2 -apple-system, system-ui, sans-serif; color: #1d1d1f; } body.pb-song-mode.pb-skin-light .pbLightTitleMeta { width: 100%; font: 400 11px/1.2 -apple-system, system-ui, sans-serif; color: #86868b; } /* инструменты песни в шапке (перенесены из бургера): «Легенда» + «Вид разворот/столбик». Видны всем в режиме песни (это настройки отображения листа, не админ-действия). */ body.pb-song-mode.pb-skin-light #pbSongTools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } body.pb-song-mode.pb-skin-light .pbSongTool { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(0,0,0,.1); background: #fff; font: 500 13px/1 -apple-system, system-ui, sans-serif; color: #6e6e73; cursor: pointer; } body.pb-song-mode.pb-skin-light .pbSongTool:hover { background: #f5f5f7; } body.pb-song-mode.pb-skin-light #favoriteTopButton.pbFavoriteOn { border-color: rgba(216,59,75,.36); color: #d83b4b; background: #fff1f3; } body.pb-song-mode.pb-skin-light #favoriteTopButton.pbFavoriteOn:hover { background: #ffe8ec; } /* «Шаг назад» (отмена переноса строки) — только админ; переносы строк делает только он. */ body.pb-song-mode.pb-skin-light #pbSongTools .pbSongTool.pbAdminOnly { display: none; } body.pb-song-mode.pb-skin-light #pbSongTools #pbWholeSongPracticeTop, body.pb-song-mode.pb-skin-light #pbSongTools #pbFragmentPracticeTop { display: none; } body.pb-song-mode.pb-skin-light.pb-admin #pbSongTools .pbSongTool.pbAdminOnly { display: inline-flex; } body.pb-song-mode.pb-skin-light #pbSongTools .pbSongTool:disabled { opacity: .4; cursor: default; pointer-events: none; } /* В админском виде справа добавляются служебные действия, поэтому центральные инструменты делаем компактными иконками. У ученика подписи остаются читаемыми. */ body.pb-song-mode.pb-skin-light.pb-admin #pbSongTools, body.pb-song-mode.pb-skin-light.pb-has-admin #pbSongTools { gap: 5px; } body.pb-song-mode.pb-skin-light.pb-admin #pbSongTools .pbSongTool, body.pb-song-mode.pb-skin-light.pb-has-admin #pbSongTools .pbSongTool { width: 34px; padding: 0; justify-content: center; } body.pb-song-mode.pb-skin-light.pb-admin #pbSongTools .pbSongToolLbl, body.pb-song-mode.pb-skin-light.pb-has-admin #pbSongTools .pbSongToolLbl { display: none; } /* компактный зум листа в шапке: [− 100% +] */ body.pb-song-mode.pb-skin-light #pbSongTools .pbSongZoom { display: inline-flex; align-items: center; height: 34px; padding: 0 4px; border-radius: 9px; border: 1px solid rgba(0,0,0,.1); background: #fff; } body.pb-song-mode.pb-skin-light #pbSongTools .pbSongZoom button { border: 0; background: transparent; cursor: pointer; color: #1d1d1f; font: 600 16px/1 -apple-system, system-ui, sans-serif; padding: 6px 9px; border-radius: 7px; } body.pb-song-mode.pb-skin-light #pbSongTools .pbSongZoom button:hover { background: #f0f0f2; } body.pb-song-mode.pb-skin-light #pbSongTools #pbZoomLabelTop { min-width: 46px; text-align: center; cursor: pointer; font: 500 12px/1 -apple-system, system-ui, sans-serif; color: #6e6e73; } body.pb-song-mode.pb-skin-light .pbSongTool i { color: inherit; } /* активная легенда / открытое окно установки — подсветка кнопки акцентом */ body.pb-song-mode.pb-skin-light.pb-legend-on #legendToggleButton, body.pb-song-mode.pb-skin-light .pbSongTool.pbSongToolOn { border-color: var(--accent); color: var(--accent); background: rgba(0,113,227,.08); } /* на узком экране прячем подписи — оставляем только иконки, чтобы шапка не переполнялась */ @media (max-width: 900px) { body.pb-song-mode.pb-skin-light .pbSongToolLbl { display: none; } body.pb-song-mode.pb-skin-light .pbSongTool { padding: 0 10px; } } @media (min-width: 641px) and (max-width: 900px) { body.pb-song-mode.pb-skin-light.pb-admin #pbLightBrand { width: 142px; } body.pb-song-mode.pb-skin-light.pb-admin #pbLightTitle { flex: 0 1 150px; min-width: 104px; } body.pb-song-mode.pb-skin-light.pb-admin #pbSongTools { flex: 1 1 auto; min-width: 48px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.pb-song-mode.pb-skin-light.pb-admin #pbSongTools::-webkit-scrollbar { display: none; } body.pb-song-mode.pb-skin-light.pb-admin #pbSongTools > * { flex: 0 0 auto; } body.pb-song-mode.pb-skin-light.pb-admin #upperRight { flex: 0 0 auto; } } /* правый кластер действий */ body.pb-song-mode.pb-skin-light #upperRight { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; float: none; min-width: max-content; } /* модалка входа ученика для кнопки «В коллекцию» */ .pbStudentAuthOverlay { position: fixed; inset: 0; z-index: 2147482500; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(245,245,247,.78); backdrop-filter: blur(18px); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } .pbStudentAuthOverlay.pb-on { display: flex; } .pbStudentAuthBox { width: min(420px, 100%); background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.18); padding: 18px; } .pbStudentAuthHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .pbStudentAuthHead b { font-size: 18px; color: #1d1d1f; } .pbStudentAuthClose { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(0,0,0,.09); background: #fff; cursor: pointer; } .pbStudentAuthTabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 10px; background: #ececf0; margin-bottom: 14px; } .pbStudentAuthTabs button { border: 0; border-radius: 8px; background: transparent; padding: 9px; font-weight: 700; color: #6e6e73; cursor: pointer; } .pbStudentAuthTabs button.pb-on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0,0,0,.12); } .pbStudentAuthBox label { display: block; font-size: 12px; font-weight: 700; color: #6e6e73; margin: 10px 0 5px; } .pbStudentAuthBox input { width: 100%; height: 42px; border: 1px solid rgba(0,0,0,.09); border-radius: 10px; padding: 0 12px; font: 400 15px/1 -apple-system,system-ui,sans-serif; } .pbStudentAuthSubmit { width: 100%; height: 42px; border: 0; border-radius: 10px; margin-top: 14px; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; } .pbStudentAuthForgot { display: block; margin: 10px auto 0; border: 0; background: transparent; color: var(--accent); font: 600 13px/1 -apple-system,system-ui,sans-serif; cursor: pointer; } .pbStudentAuthMsg { min-height: 18px; margin-top: 10px; font-size: 13px; color: #c0392b; } /* «К конструктору» — лёгкая ghost-кнопка (сохраняем выход из песни); только эффективному админу */ body.pb-song-mode.pb-skin-light.pb-admin #upperRight #pbSongClose { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(0,0,0,.1); background: #fff; font: 500 13px/1 -apple-system, system-ui, sans-serif; color: #6e6e73; cursor: pointer; } body.pb-song-mode.pb-skin-light #upperRight #pbSongClose:hover { background: #f5f5f7; } /* у ученика (нет .pb-admin) перебиваем безусловный inline-показ из index.html */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongClose { display: none !important; } body.pb-song-mode.pb-skin-light #upperRight #pbSongClose i { color: inherit; } /* «Глазами ученика» / «В админку» — только реальному админу. В режиме предпросмотра это единственный служебный контрол поверх ученического вида. */ body.pb-song-mode.pb-skin-light.pb-has-admin #pbLightViewBtn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 9px; border: 1px solid rgba(0,0,0,.1); background: #fff; font: 500 13px/1 -apple-system, system-ui, sans-serif; color: #1d1d1f; cursor: pointer; } body.pb-song-mode.pb-skin-light.pb-has-admin #pbLightViewBtn:hover { background: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-has-admin:not(.pb-admin) #pbLightViewBtn { background: #1d1d1f; border-color: #1d1d1f; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.14); } body.pb-song-mode.pb-skin-light.pb-has-admin:not(.pb-admin) #pbLightViewBtn:hover { background: #2c2c2e; } body.pb-song-mode.pb-skin-light.pb-has-admin:not(.pb-admin) #pbLightViewBtn::before { content: "Публичный просмотр"; color: rgba(255,255,255,.72); font-weight: 500; padding-right: 8px; margin-right: 1px; border-right: 1px solid rgba(255,255,255,.28); } /* «Сохранить» — primary, только эффективному админу (не в режиме «как ученик») */ body.pb-song-mode.pb-skin-light.pb-admin #pbLightSaveBtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 9px; border: none; background: var(--accent); color: #fff; font: 600 13px/1 -apple-system, system-ui, sans-serif; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.12); position: relative; } body.pb-song-mode.pb-skin-light.pb-admin #pbLightSaveBtn:hover { filter: brightness(1.07); } /* точка «несохранённые правки» у кнопки сохранить */ body.pb-song-mode.pb-skin-light .pbLightDirtyDot { display: none; } body.pb-song-mode.pb-skin-light.pb-server-dirty .pbLightDirtyDot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ffd60a; box-shadow: 0 0 0 2px rgba(255,255,255,.6); } /* бургер-кнопка — белая квадратная */ body.pb-song-mode.pb-skin-light #burgerMenuToggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(0,0,0,.1); background: #fff; color: #6e6e73; cursor: pointer; padding: 0; margin: 0; } body.pb-song-mode.pb-skin-light #burgerMenuToggle:hover { background: #f5f5f7; } /* Бургер — только эффективному админу. Ученик и админ в предпросмотре видят чистую ученическую шапку. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #burgerMenuToggle, body.pb-song-mode.pb-skin-light:not(.pb-admin) #burgerDropdown { display: none !important; } /* Узкое окно админа: оставляем все действия доступными, но превращаем служебные кнопки в иконки. */ @media (max-width: 1380px) { body.pb-song-mode.pb-skin-light.pb-admin #TopNav { gap: 10px; padding: 0 14px; } body.pb-song-mode.pb-skin-light.pb-admin #pbLightBrand { width: 158px; height: 40px; } body.pb-song-mode.pb-skin-light.pb-admin .pbBrandLogo { height: 40px; } body.pb-song-mode.pb-skin-light.pb-admin #upperRight { gap: 6px; } body.pb-song-mode.pb-skin-light.pb-admin #pbSongClose, body.pb-song-mode.pb-skin-light.pb-admin #pbLightViewBtn, body.pb-song-mode.pb-skin-light.pb-admin #pbLightSaveBtn { width: 34px; min-width: 34px; padding: 0; justify-content: center; } body.pb-song-mode.pb-skin-light.pb-admin #pbSongClose .saveLabel, body.pb-song-mode.pb-skin-light.pb-admin #pbLightViewLbl { display: none; } body.pb-song-mode.pb-skin-light.pb-admin #pbLightSaveBtn { font-size: 0; gap: 0; } body.pb-song-mode.pb-skin-light.pb-admin #pbLightSaveBtn::after { content: "✓"; font: 800 15px/1 -apple-system, system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-server-dirty #pbLightSaveBtn .pbLightDirtyDot { position: absolute; top: 7px; right: 7px; } body.pb-song-mode.pb-skin-light.pb-has-admin:not(.pb-admin) #pbLightViewBtn::before { content: none; } body.pb-song-mode.pb-skin-light.pb-has-admin:not(.pb-admin) #pbLightViewBtn { padding: 0 14px; } } /* выпадающее меню бургера — светлый Apple-скин (перебиваем фиолетовые !important из groove_writer_orange.css) */ body.pb-song-mode.pb-skin-light #burgerDropdown { top: 56px !important; right: 24px !important; min-width: 232px !important; padding: 7px !important; background: rgba(255,255,255,.92) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid rgba(0,0,0,.08) !important; border-radius: 14px !important; box-shadow: 0 12px 34px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08) !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light #burgerDropdown .burger-item, body.pb-song-mode.pb-skin-light #burgerDropdown #tapTempoButton, body.pb-song-mode.pb-skin-light #burgerDropdown #drumVizToggleTop { padding: 9px 12px !important; border-radius: 9px !important; margin: 1px 0 !important; color: #1d1d1f !important; font-size: 13.5px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; gap: 10px !important; } body.pb-song-mode.pb-skin-light #burgerDropdown .burger-item:hover, body.pb-song-mode.pb-skin-light #burgerDropdown #tapTempoButton:hover, body.pb-song-mode.pb-skin-light #burgerDropdown #drumVizToggleTop:hover { background: #f0f0f3 !important; } body.pb-song-mode.pb-skin-light #burgerDropdown .burger-item i { width: 16px; text-align: center; color: #86868b; } /* «Войти как админ» / «Вернуться в режим админа» — визуально отделены сверху */ body.pb-song-mode.pb-skin-light #burgerDropdown #pbAdminAuthItem, body.pb-song-mode.pb-skin-light #burgerDropdown #pbViewModeItem { margin-top: 6px !important; border-top: 1px solid rgba(0,0,0,.07) !important; padding-top: 12px !important; border-radius: 0 0 9px 9px !important; color: #6e6e73 !important; } body.pb-song-mode.pb-skin-light .burger-divider { background: rgba(0,0,0,.08); margin: 5px 8px; } /* модалка «Открыть песню» — светлый Apple-скин (перекрывает кремовые базовые стили из index.html) */ body.pb-song-mode.pb-skin-light #pbSongsModal { background: rgba(0,0,0,.32); padding: 72px 16px; } body.pb-song-mode.pb-skin-light .pb-songs-box { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.24), 0 4px 14px rgba(0,0,0,.1); max-width: 480px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light .pb-songs-head { padding: 16px 18px; border-bottom: 1px solid rgba(0,0,0,.07); background: #fff; color: #1d1d1f; font-size: 16px; font-weight: 600; } body.pb-song-mode.pb-skin-light .pb-songs-head button { border: none; background: #f0f0f3; color: #6e6e73; border-radius: 8px; width: 30px; height: 30px; font-size: 17px; } body.pb-song-mode.pb-skin-light .pb-songs-head button:hover { background: #e5e5ea; color: #1d1d1f; } body.pb-song-mode.pb-skin-light .pb-songs-list { padding: 8px; color: #1d1d1f; } body.pb-song-mode.pb-skin-light .pb-song-item { border: 1px solid rgba(0,0,0,.07); background: #fff; border-radius: 11px; padding: 12px 14px; margin: 5px 0; color: #1d1d1f; transition: background .12s, border-color .12s; } body.pb-song-mode.pb-skin-light .pb-song-item:hover { background: #f5f5f7; border-color: rgba(0,0,0,.14); } body.pb-song-mode.pb-skin-light .pb-song-title { font-weight: 600; color: #1d1d1f; } body.pb-song-mode.pb-skin-light .pb-song-date { color: #86868b; } body.pb-song-mode.pb-skin-light .pb-songs-filter { padding: 10px 10px 2px; } body.pb-song-mode.pb-skin-light .pb-songs-filter button { border: 1px solid rgba(0,0,0,.12); background: #fff; color: #6e6e73; border-radius: 999px; padding: 5px 13px; font-size: 13px; } body.pb-song-mode.pb-skin-light .pb-songs-filter button:hover { background: #f0f0f3; } body.pb-song-mode.pb-skin-light .pb-songs-filter button.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } body.pb-song-mode.pb-skin-light .pb-song-tag { background: #f0f0f3; color: #6e6e73; } /* ── модалка «Свойства песни» (админ): название / автор / темп ── */ #pbMetaModal { position: fixed; inset: 0; z-index: 9100; display: none; align-items: flex-start; justify-content: center; background: rgba(0,0,0,.32); padding: 72px 16px; } #pbMetaModal.pb-open { display: flex; } #pbMetaModal .pb-meta-box { max-width: 440px; } #pbMetaModal .pb-meta-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; } #pbMetaModal .pb-meta-field { display: flex; flex-direction: column; gap: 6px; } #pbMetaModal .pb-meta-field > span { font-size: 12px; font-weight: 600; color: #6e6e73; } #pbMetaModal .pb-meta-field input { height: 40px; border-radius: 10px; border: 1px solid rgba(0,0,0,.15); background: #fff; padding: 0 12px; font: 400 15px/1 -apple-system, system-ui, sans-serif; color: #1d1d1f; box-sizing: border-box; } #pbMetaModal .pb-meta-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,.15); } #pbMetaModal .pb-meta-actions { display: flex; gap: 10px; margin-top: 4px; } #pbMetaModal .pb-meta-actions button { flex: 1; height: 42px; border-radius: 11px; font: 600 14px/1 -apple-system, system-ui, sans-serif; cursor: pointer; border: none; } #pbMetaModal .pb-meta-cancel { background: #f0f0f3; color: #1d1d1f; } #pbMetaModal .pb-meta-cancel:hover { background: #e5e5ea; } #pbMetaModal .pb-meta-save { background: var(--accent); color: #fff; } #pbMetaModal .pb-meta-save:hover { filter: brightness(1.07); } #pbMetaModal .pb-meta-hint { font-size: 12px; line-height: 1.4; color: #86868b; } /* админские пункты бургера для текущей песни — только эффективному админу */ body.pb-song-mode.pb-skin-light #burgerDropdown #songMetaButton, body.pb-song-mode.pb-skin-light #burgerDropdown #deleteSongButton { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin #burgerDropdown #songMetaButton, body.pb-song-mode.pb-skin-light.pb-admin #burgerDropdown #deleteSongButton { display: flex !important; } body.pb-song-mode.pb-skin-light #burgerDropdown .pb-danger-item { color: #b42318 !important; } body.pb-song-mode.pb-skin-light #burgerDropdown .pb-danger-item i { color: #d92d20 !important; } body.pb-song-mode.pb-skin-light #burgerDropdown .pb-danger-item:hover { background: #fff1f0 !important; color: #912018 !important; } /* --- раскладка: убираем левый рейл 72px, разворачиваем бары на всю ширину, опускаем контент под 64px-шапку --- */ body.pb-song-mode.pb-skin-light #LeftHandNav { display: none !important; } body.pb-song-mode.pb-skin-light #TopNav { left: 0; margin-left: 0; width: 100%; } body.pb-song-mode.pb-skin-light #midiPlayer { top: 64px; left: 0; width: 100%; } body.pb-song-mode.pb-skin-light #RightHandContent { top: 112px; left: 0; width: 100%; height: calc(100% - 112px); background: #f5f5f7 !important; } body.pb-song-mode.pb-skin-light #GrooveWriter { background: #f5f5f7 !important; } /* --- название песни в одну строку (без переноса/наезда на транспорт) --- */ body.pb-song-mode.pb-skin-light #pbLightTitle { overflow: hidden; } body.pb-song-mode.pb-skin-light .pbLightTitleMain { white-space: nowrap; max-width: 100%; } body.pb-song-mode.pb-skin-light #pbLightTitleText { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } body.pb-song-mode.pb-skin-light .pbLightTitleMeta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } body.pb-song-mode.pb-skin-light #TopNav { overflow: hidden; } /* ===================== ШАГ 2 · СВЕТЛЫЙ ТРАНСПОРТ ===================== */ /* Перекрываем тёмный (#222) плеер GrooveScribe: белая полоса под шапкой, круглый accent-плей 52px, время, компактный темп, сегмент-метроном справа. Метроном переносится в строку плеера из шапки (JS pbMoveMetronomeToTransport). */ body.pb-song-mode.pb-skin-light #midiPlayer { background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); } body.pb-song-mode.pb-skin-light #pbNotesCollapseBtn { display: none; } body.pb-song-mode.pb-skin-light.pb-admin #pbNotesCollapseBtn { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 92px; padding: 0 12px; margin-left: auto; border: 1px solid rgba(0,0,0,.10); border-radius: 999px; background: #f5f5f7; color: #1d1d1f; font: 700 12px/1 -apple-system, system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light.pb-admin #pbNotesCollapseBtn:hover { background: #ececf0; } body.pb-song-mode.pb-skin-light #playerControl1, body.pb-song-mode.pb-skin-light .playerControl { background: #fff !important; width: 100%; } body.pb-song-mode.pb-skin-light #playerControlsRow1 { display: flex; align-items: center; gap: 16px; height: auto; min-height: 72px; padding: 10px 22px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } /* круглая play 52px в тон акцента */ body.pb-song-mode.pb-skin-light #midiPlayImage1.midiPlayImage { width: 52px; height: 52px; margin: 0; flex: none; background: var(--accent); border-radius: 50%; line-height: 52px; font-size: 21px; box-shadow: 0 6px 18px rgba(0,113,227,.34); } body.pb-song-mode.pb-skin-light #midiPlayImage1.midiPlayImage:hover { background: var(--accent); filter: brightness(1.06); } body.pb-song-mode.pb-skin-light #midiPlayImage1.midiPlayImage:before, body.pb-song-mode.pb-skin-light #midiPlayImage1.midiPlayImage.Stopped:before, body.pb-song-mode.pb-skin-light #midiPlayImage1.midiPlayImage.Paused:before, body.pb-song-mode.pb-skin-light #midiPlayImage1.midiPlayImage.Playing:before { color: #fff; } /* смысловая подпись к синей кнопке: это именно ноты/MIDI, а не минусовка */ body.pb-song-mode.pb-skin-light .pbNotesTransportMeta { flex: 0 0 auto; min-width: 132px; max-width: 190px; line-height: 1.18; } body.pb-song-mode.pb-skin-light .pbNotesTransportTitle { font-size: 14px; font-weight: 700; color: #1d1d1f; white-space: nowrap; } body.pb-song-mode.pb-skin-light .pbNotesTransportSub { margin-top: 3px; font-size: 11px; font-weight: 500; color: #86868b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* время воспроизведения */ body.pb-song-mode.pb-skin-light #MIDIPlayTime1.MIDIPlayTime { width: auto; min-width: 48px; flex: none; margin: 0; padding: 0; font-size: 19px; font-weight: 600; color: #6e6e73; font-variant-numeric: tabular-nums; line-height: 1; text-align: left; } /* темп: число (поле) + тонкий accent-слайдер + капс-лейбл ТЕМП */ body.pb-song-mode.pb-skin-light .tempoAndProgress { width: auto; flex: 1; height: auto; display: flex; align-items: center; } body.pb-song-mode.pb-skin-light .tempoRow { display: flex; align-items: center; gap: 11px; height: auto; margin: 0; width: 100%; } body.pb-song-mode.pb-skin-light .tempoLabel { order: 3; width: auto; flex: none; padding: 0; line-height: 1; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #a1a1a6; text-align: left; } body.pb-song-mode.pb-skin-light .tempoTextField { order: 1; width: 56px; flex: none; margin: 0; height: auto; padding: 5px 0; font-size: 19px; font-weight: 600; color: #1d1d1f; background: #f0f0f2; border: none; border-radius: 8px; text-align: center; font-variant-numeric: tabular-nums; } body.pb-song-mode.pb-skin-light .tempoInput { order: 2; flex: 1; max-width: 260px; margin: 0; height: 4px; color: var(--accent); accent-color: var(--accent); } /* Range-слайдеры в светлом режиме: убираем крупный legacy-thumb GrooveScribe 36px. */ body.pb-song-mode.pb-skin-light input[type=range] { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; border-radius: 999px; cursor: pointer; } body.pb-song-mode.pb-skin-light input[type=range]::-webkit-slider-runnable-track { height: 4px; border: 0; border-radius: 999px; background: #d8d8df; } body.pb-song-mode.pb-skin-light input[type=range]::-webkit-slider-thumb, body.pb-song-mode.pb-skin-light input[type=range].touch::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; border: 1px solid rgba(0,0,0,.28); background: linear-gradient(#f7f7f8, #d6d6da); box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.45) inset; } body.pb-song-mode.pb-skin-light input[type=range]::-moz-range-track { height: 4px; border: 0; border-radius: 999px; background: #d8d8df; } body.pb-song-mode.pb-skin-light input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.28); background: linear-gradient(#f7f7f8, #d6d6da); box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.45) inset; } body.pb-song-mode.pb-skin-light input[type=range]:hover::-webkit-slider-thumb, body.pb-song-mode.pb-skin-light input[type=range]:focus-visible::-webkit-slider-thumb { border-color: rgba(0,0,0,.36); box-shadow: 0 1px 3px rgba(0,0,0,.28), 0 0 0 5px rgba(0,113,227,.10); } body.pb-song-mode.pb-skin-light input[type=range]:hover::-moz-range-thumb, body.pb-song-mode.pb-skin-light input[type=range]:focus-visible::-moz-range-thumb { border-color: rgba(0,0,0,.36); box-shadow: 0 1px 3px rgba(0,0,0,.28), 0 0 0 5px rgba(0,113,227,.10); } /* метроном-сегмент (перенесён в транспорт, обёрнут в .pbMetTrack) */ body.pb-song-mode.pb-skin-light #metronomeContainer { display: inline-flex; align-items: center; gap: 9px; flex: none; margin-left: auto; } body.pb-song-mode.pb-skin-light #metronomeLabel { margin: 0; height: auto; color: #a1a1a6; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } body.pb-song-mode.pb-skin-light .pbMetTrack { display: inline-flex; align-items: center; gap: 2px; background: #ececf0; border-radius: 9px; padding: 3px; } body.pb-song-mode.pb-skin-light .pbMetTrack .metronomeButton { background: transparent; color: #6e6e73; border-radius: 7px; height: auto; min-width: auto; margin: 0; padding: 5px 11px; font-size: 12px; font-weight: 600; box-shadow: none; font-family: -apple-system, system-ui, sans-serif; } body.pb-song-mode.pb-skin-light .pbMetTrack .metronomeButton:hover { background: rgba(255,255,255,.55); } body.pb-song-mode.pb-skin-light .pbMetTrack .metronomeButton.buttonSelected, body.pb-song-mode.pb-skin-light .pbMetTrack .metronomeButton.buttonSelected:hover { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0,0,0,.12); } /* ===================== ШАГ 3 · ПРАВЫЙ ИНСПЕКТОР 362px ===================== */ /* Горизонтальный кремовый тулбар (#pbToolbar) → фиксированная правая панель. Контент (лист, легенда) уходит влево (padding-right у #RightHandContent). id/onclick/гейты не трогаем — только раскладка и стиль. */ /* выровнять вертикаль: шапка 64 + транспорт 76 = 140 */ body.pb-song-mode.pb-skin-light #midiPlayer { top: 64px; height: 76px; } body.pb-song-mode.pb-skin-light #playerControl1 { height: 76px; } body.pb-song-mode.pb-skin-light #playerControlsRow1 { min-height: 76px; height: 76px; } body.pb-song-mode.pb-skin-light #RightHandContent { top: 140px; height: calc(100% - 140px); padding-right: 362px; box-sizing: border-box; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed #midiPlayer { height: 44px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed #playerControl1, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed #playerControlsRow1 { min-height: 44px; height: 44px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed #playerControlsRow1 { padding-top: 5px; padding-bottom: 5px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed #midiPlayImage1.midiPlayImage { width: 34px; height: 34px; line-height: 34px; font-size: 15px; box-shadow: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed .pbNotesTransportSub, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed #MIDIPlayTime1, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed .tempoAndProgress, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed #metronomeContainer { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed #RightHandContent { top: 108px; height: calc(100% - 108px); } /* сам инспектор — правая колонка */ body.pb-song-mode.pb-skin-light #pbToolbar { position: fixed; top: 140px; right: 0; width: 362px; height: calc(100vh - 140px); overflow-y: auto; overflow-x: hidden; margin: 0; padding: 0; border: 0; border-left: 1px solid rgba(0,0,0,.08); border-radius: 0; background: #fff; box-shadow: none; z-index: 20; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-notes-collapsed #pbToolbar { top: 108px; height: calc(100vh - 108px); } /* статус-плашка отработки — мягкая инфо-полоса сверху */ body.pb-song-mode.pb-skin-light #pbToolbar .pbTbStatus { display: block; padding: 14px 20px; margin: 0; gap: 8px; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 12.5px; line-height: 1.45; color: #6e6e73; } body.pb-song-mode.pb-skin-light #pbToolbar #pbSongLoopInfo { color: #1f9d4d; font-weight: 600; } body.pb-song-mode.pb-skin-light #pbToolbar #pbSongLoopClear { margin: 8px 0 0; } /* группы → вертикальные секции */ body.pb-song-mode.pb-skin-light #pbToolbar .pbTbTools { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; border-top: 0; } body.pb-song-mode.pb-skin-light #pbToolbar .pbTbGroup { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 18px 20px; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.06); } /* порядок секций как в дизайне: Минус → Игра → Лист → Вёрстка → Редактор */ body.pb-song-mode.pb-skin-light #pbToolbar #pbBackingGroup { order: 1; } body.pb-song-mode.pb-skin-light #pbToolbar #pbGameGroup { order: 2; } body.pb-song-mode.pb-skin-light #pbToolbar .pbTbGroup:first-child { order: 3; } /* Вид/Лист нот */ body.pb-song-mode.pb-skin-light #pbToolbar .pbTbGroup.pbAdminOnly { order: 4; } /* Вёрстка */ body.pb-song-mode.pb-skin-light #pbToolbar .pbTbGroup.pbEditorOnly { order: 5; } /* Редактор */ /* заголовок секции */ body.pb-song-mode.pb-skin-light #pbToolbar .pbTbLabel { background: transparent; color: #86868b; padding: 0 0 2px; align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } body.pb-song-mode.pb-skin-light #pbToolbar #pbGameGroup .pbTbLabel { color: #86868b; background: transparent; } /* кнопки — светлые, на всю ширину */ body.pb-song-mode.pb-skin-light #pbToolbar button { border: 1px solid rgba(0,0,0,.1); background: #fff; color: #1d1d1f; border-radius: 9px; padding: 9px 12px; font-size: 13px; font-weight: 500; line-height: 1.2; text-align: left; width: 100%; white-space: normal; font-family: -apple-system, system-ui, sans-serif; } body.pb-song-mode.pb-skin-light #pbToolbar button:hover { background: #f5f5f7; } /* строки с подписью+контролом (Скорость/Барабаны/Чувств./Задержка/чекбоксы) */ body.pb-song-mode.pb-skin-light #pbToolbar .pbToolLabel { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font-size: 13px; color: #1d1d1f; white-space: normal; } body.pb-song-mode.pb-skin-light #pbToolbar .pbToolLabel input[type="range"] { flex: 1; width: auto; min-width: 0; accent-color: var(--accent); } body.pb-song-mode.pb-skin-light #pbToolbar select { border: 1px solid rgba(0,0,0,.12); background: #fff; color: #1d1d1f; border-radius: 8px; padding: 6px 8px; font-size: 13px; width: auto; } body.pb-song-mode.pb-skin-light #pbToolbar input[type="number"] { width: 56px; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; padding: 5px 7px; font-size: 13px; } /* зум-контрол листа */ body.pb-song-mode.pb-skin-light #pbToolbar .pbZoomCtl { display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: 14px; color: #6e6e73; } body.pb-song-mode.pb-skin-light #pbToolbar .pbZoomCtl button { width: auto; min-width: 36px; text-align: center; font-weight: 600; padding: 6px 10px; } body.pb-song-mode.pb-skin-light #pbToolbar #pbZoomLabel { min-width: 48px; text-align: center; font-weight: 600; color: #1d1d1f; } /* play минуса */ body.pb-song-mode.pb-skin-light #pbToolbar #pbBackingPlay { width: 44px; height: 44px; flex: none; border-radius: 50%; text-align: center; border: 1px solid var(--accent); color: var(--accent); background: #fff; font-size: 15px; align-self: flex-start; } body.pb-song-mode.pb-skin-light #pbToolbar #pbBackingPlay:hover { background: #eef3fd; } /* primary-кнопка «Открыть в конструкторе» (статус) */ body.pb-song-mode.pb-skin-light #pbToolbar #pbSongOpenEdit { background: var(--accent); color: #fff; border: none; font-weight: 600; text-align: center; } body.pb-song-mode.pb-skin-light #pbToolbar #pbSongOpenEdit:hover { filter: brightness(1.07); background: var(--accent); } /* «Опубликовать минус» (футер) — ghost */ body.pb-song-mode.pb-skin-light #pbToolbar #pbBackingSave { background: #fff; color: #1d1d1f; border: 1px solid rgba(0,0,0,.1); font-weight: 500; text-align: center; } body.pb-song-mode.pb-skin-light #pbToolbar #pbBackingSave:hover { background: #f5f5f7; } /* зелёная кнопка «Играть» (контроль игры) */ body.pb-song-mode.pb-skin-light #pbToolbar #pbGameBtn { background: #34c759; color: #fff; border: none; font-weight: 600; text-align: center; } body.pb-song-mode.pb-skin-light #pbToolbar #pbGameBtn:hover { filter: brightness(1.06); background: #34c759; } body.pb-song-mode.pb-skin-light #pbToolbar #pbGameBtn.pbgOn { background: #ff3b30; } /* подсказки секций */ body.pb-song-mode.pb-skin-light #pbToolbar .pbTbHint { font-size: 12px; line-height: 1.4; color: #86868b; margin: 0; padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,.06); } body.pb-song-mode.pb-skin-light #pbToolbar #pbDirtyHint { color: #ff3b30; font-weight: 500; } /* калибровочная волна — пока компактно внутри панели (детальный светлый вид — Шаг 4) */ body.pb-song-mode.pb-skin-light #pbToolbar #pbBackingWaveWrap { padding: 14px 20px; margin: 0 !important; border-bottom: 1px solid rgba(0,0,0,.06); } /* фон страницы в режиме песни — светлый (перекрываем тёмный #393939 темы конструктора, иначе он просвечивает под левой областью ниже листа) */ body.pb-song-mode.pb-skin-light { background: #f5f5f7 !important; } /* чекбоксы → iOS-тумблеры; в строке: подпись слева, тумблер справа */ body.pb-song-mode.pb-skin-light #pbToolbar .pbToolLabel:has(input[type="checkbox"]) { flex-direction: row-reverse; justify-content: space-between; } body.pb-song-mode.pb-skin-light #pbToolbar .pbToolLabel input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; cursor: pointer; width: 42px; height: 25px; border-radius: 13px; background: #e2e2e7; position: relative; transition: background .15s; margin: 0; } body.pb-song-mode.pb-skin-light #pbToolbar .pbToolLabel input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; } body.pb-song-mode.pb-skin-light #pbToolbar .pbToolLabel input[type="checkbox"]:checked { background: #34c759; } body.pb-song-mode.pb-skin-light #pbToolbar .pbToolLabel input[type="checkbox"]:checked::after { left: 19px; } /* ---- секции пересобранного инспектора (Шаг 3, точно по макету) ---- */ body.pb-song-mode.pb-skin-light #pbToolbar .pbInspSec { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 18px 20px; border-bottom: 1px solid rgba(0,0,0,.06); box-sizing: border-box; width: 100%; max-width: 100%; /* не распирать панель (min-content) */ } /* те же секции-обёртки — держим в ширине панели, иначе контент вылезает за край */ body.pb-song-mode.pb-skin-light #pbToolbar .pbInspTop, body.pb-song-mode.pb-skin-light #pbToolbar .pbInspFooter { box-sizing: border-box; width: 100%; max-width: 100%; } body.pb-song-mode.pb-skin-light #pbToolbar .pbInspHd { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #86868b; margin-bottom: 2px; } body.pb-song-mode.pb-skin-light #pbToolbar .pbInspField { display: flex; flex-direction: column; gap: 7px; } body.pb-song-mode.pb-skin-light #pbToolbar .pbInspFieldLbl { font-size: 13px; color: #1d1d1f; } /* сегмент-контрол (Просмотр|Редактор, Барабаны под минус) */ body.pb-song-mode.pb-skin-light #pbToolbar .pbSeg { display: flex; gap: 2px; background: #ececf0; border-radius: 9px; padding: 3px; } body.pb-song-mode.pb-skin-light #pbToolbar .pbSeg .pbSegBtn { flex: 1; width: auto; border: none; background: transparent; color: #6e6e73; border-radius: 7px; padding: 7px 6px; font-size: 12px; font-weight: 600; text-align: center; } body.pb-song-mode.pb-skin-light #pbToolbar .pbSeg .pbSegBtn:hover { background: rgba(255,255,255,.55); } body.pb-song-mode.pb-skin-light #pbToolbar .pbSeg .pbSegBtn.pbSegOn, body.pb-song-mode.pb-skin-light #pbToolbar .pbSeg .pbSegBtn.pbSegOn:hover { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0,0,0,.12); } body.pb-song-mode.pb-skin-light #pbToolbar .pbSeg .pbSegBtn:disabled { opacity: .45; cursor: default; } /* верхний сегмент режима — только админу */ body.pb-song-mode.pb-skin-light #pbToolbar .pbInspTop { display: none; padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,.06); } body.pb-admin.pb-song-mode.pb-skin-light #pbToolbar .pbInspTop { display: block; } /* секция «Калибровка по тактам» — accent-тинт */ body.pb-song-mode.pb-skin-light #pbToolbar #pbTapStart { background: #eef3fd; border-color: #dce8fb; color: #2c4a73; text-align: center; } body.pb-song-mode.pb-skin-light #pbToolbar #pbTapStart:hover { background: #e2ecfc; } /* секция «Редактор» — по режиму редактора */ body.pb-song-mode.pb-skin-light #pbToolbar .pbInspEditor { display: none; } body.pb-editor-mode.pb-song-mode.pb-skin-light #pbToolbar .pbInspEditor { display: flex; } /* футер — только админу */ body.pb-song-mode.pb-skin-light #pbToolbar .pbInspFooter { display: none; flex-direction: column; gap: 9px; padding: 18px 20px; } body.pb-admin.pb-song-mode.pb-skin-light #pbToolbar .pbInspFooter { display: flex; } body.pb-song-mode.pb-skin-light #pbToolbar #pbBackingHere { background: #fff; } /* перекрываем legacy inline-flex для админ-гейтов в светлом скине: кнопки блочные на всю ширину */ body.pb-admin.pb-song-mode.pb-skin-light #pbToolbar button.pbAdminOnly, body.pb-admin.pb-song-mode.pb-skin-light #pbToolbar button.pbBackAdmin { display: block !important; width: 100%; } /* ---- БЕЛЫЕ нотные листы (как в макете): убираем кремовую «тетрадь» ---- */ body.pb-song-mode.pb-skin-light #pbSongSheet { background: transparent !important; box-shadow: none !important; padding: 0 !important; } body.pb-song-mode.pb-skin-light #pbSongSheet > div[id^="osmdCanvasPage"] { background: #fff !important; background-image: none !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04) !important; border-radius: 14px !important; } body.pb-song-mode .pbMeasurePopover .pbPopInline { display: flex; align-items: center; gap: 7px; padding: 9px 10px 10px; border-bottom: 1px solid #ececf0; font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; color: #3a3a3c; } body.pb-song-mode .pbMeasurePopover .pbPopInline input { width: 52px; height: 28px; box-sizing: border-box; border: 1px solid #d2d2d7; border-radius: 7px; background: #fff; padding: 0 6px; color: #1d1d1f; font: 600 13px/1 -apple-system, system-ui, sans-serif; } body.pb-song-mode .pbMeasurePopover .pbPopInline button.pbPopApply { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 38px; height: 28px; margin: 0 0 0 auto; padding: 0 10px; border: 1px solid rgba(0,113,227,.22); border-radius: 7px; background: rgba(0,113,227,.08); color: var(--accent); font: 700 12px/1 -apple-system, system-ui, sans-serif; } body.pb-song-mode .pbMeasurePopover .pbPopInline button.pbPopApply:hover { background: rgba(0,113,227,.13); } /* легенда барабанов — белая карточка в тон */ body.pb-song-mode.pb-skin-light #pbLegendBanner { background: #fff !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; } /* парные кнопки в ряд (Заменить MP3|YouTube, Начало|Конец, Печать|XML, +Текст|№тактов) */ body.pb-song-mode.pb-skin-light #pbToolbar .pbInspRow { display: flex; gap: 8px; width: 100%; } body.pb-song-mode.pb-skin-light #pbToolbar .pbInspRow > button { flex: 1; width: auto; text-align: center; } body.pb-admin.pb-song-mode.pb-skin-light #pbToolbar .pbInspRow.pbAdminOnly { display: flex !important; width: 100%; } body.pb-song-mode.pb-skin-light #pbToolbar .pbAudioManageRow { align-items: center; } body.pb-song-mode.pb-skin-light #pbToolbar .pbAudioKindLbl { flex: 0 0 58px; color: #6e6e73; font-size: 12px; font-weight: 700; } body.pb-song-mode.pb-skin-light #pbToolbar .pbAudioManageRow > button { min-width: 0; padding-left: 8px; padding-right: 8px; font-size: 12px; } body.pb-song-mode.pb-skin-light #pbToolbar .pbAudioManageRow > .pbAudioUploadBtn { flex: 0 0 92px; background: #eef7f2; border-color: rgba(31,122,77,.22); color: #1f7a4d; } body.pb-song-mode.pb-skin-light #pbToolbar .pbAudioManageRow > .pbAudioUploadBtn:hover:not(:disabled) { background: #e5f3eb; border-color: rgba(31,122,77,.34); color: #17643e; } body.pb-song-mode.pb-skin-light #pbToolbar .pbAudioManageRow > .pbAudioUploadBtn:disabled { background: #f5f5f7; border-color: rgba(0,0,0,.08); color: #a1a1a6; } body.pb-song-mode.pb-skin-light #pbToolbar .pbAudioManageRow > .pbAudioDeleteBtn { flex: 0 0 72px; background: #fff8f7; border-color: #f0c7c1; color: #a33a30; } body.pb-song-mode.pb-skin-light #pbToolbar .pbAudioManageRow > .pbAudioDeleteBtn:hover:not(:disabled) { background: #fff1ef; border-color: #e7aaa1; color: #8d2f27; } body.pb-song-mode.pb-skin-light #pbToolbar .pbAudioManageRow > .pbAudioDeleteBtn:disabled { background: #f5f5f7; border-color: rgba(0,0,0,.08); color: #a1a1a6; } /* подзаголовок поля и поясняющий текст режима «Барабаны под минус» */ body.pb-song-mode.pb-skin-light #pbToolbar .pbInspFieldSub { font-size: 12px; color: #86868b; line-height: 1.35; margin: -3px 0 2px; } body.pb-song-mode.pb-skin-light #pbToolbar .pbDrumNote { font-size: 12.5px; line-height: 1.45; color: #6e6e73; background: #f5f5f7; border-radius: 9px; padding: 10px 12px; margin-top: 2px; } /* строка файла минусовки (имя · длительность + мини-плей) */ body.pb-song-mode.pb-skin-light #pbToolbar .pbFileRow { display: flex; align-items: center; gap: 11px; } body.pb-song-mode.pb-skin-light #pbToolbar .pbFileIcon { width: 38px; height: 38px; flex: none; border-radius: 9px; background: #f0f0f2; display: flex; align-items: center; justify-content: center; font-size: 17px; } body.pb-song-mode.pb-skin-light #pbToolbar .pbFileMeta { flex: 1; min-width: 0; } body.pb-song-mode.pb-skin-light #pbToolbar .pbFileName { font-size: 13px; font-weight: 600; color: #1d1d1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.pb-song-mode.pb-skin-light #pbToolbar .pbFileSub { font-size: 11px; color: #86868b; margin-top: 1px; } /* кнопка «переименовать минусовку» (карандаш) в строке файла */ body.pb-song-mode.pb-skin-light #pbToolbar .pbFileRename { width: 32px; height: 32px; flex: none; align-self: center; padding: 0; cursor: pointer; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; background: #fff; color: #6e6e73; font-size: 13px; } body.pb-song-mode.pb-skin-light #pbToolbar .pbFileRename:hover { background: #f5f5f7; color: #1d1d1f; } /* мини-плей внутри строки файла */ body.pb-song-mode.pb-skin-light #pbToolbar #pbBackingPlay.pbFilePlay { width: 38px; height: 38px; flex: none; align-self: center; } /* ===================== ШАГ 4 · ЛЕВАЯ КОЛОНКА (статус + калибровка) ===================== */ #pbLeftPanel { display: none; } body.pb-song-mode.pb-skin-light #pbLeftPanel { display: block; max-width: 1180px; margin: 0 auto; padding: 12px 0 0; } /* статус-плашка отработки — белая карточка */ body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongLoopBar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 14px 18px; font-size: 13.5px; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0,0,0,.05); } body.pb-song-mode.pb-skin-light.pb-admin #pbLeftPanel #pbSongLoopBar { display: none !important; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongLoopHint { color: #6e6e73; line-height: 1.45; flex: 1; min-width: 200px; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongLoopInfo { color: #1f9d4d; font-weight: 600; flex: 1; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongLoopClear, body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongMakeRow, body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongOpenEdit { border-radius: 9px; padding: 8px 13px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; border: 1px solid rgba(0,0,0,.1); background: #fff; color: #1d1d1f; margin: 0; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongLoopClear:hover, body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongMakeRow:hover { background: #f5f5f7; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongMakeRow { background: #f5f8ff; border-color: rgba(0,113,227,.18); color: var(--accent); font-weight: 600; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongOpenEdit { background: var(--accent); color: #fff; border: none; font-weight: 600; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongOpenEdit:hover { filter: brightness(1.07); } /* «Открыть для отработки» — ЗАМЕТНАЯ основная кнопка (зелёная «go», в тон статусу «Отрабатываем такты») */ body.pb-song-mode.pb-skin-light #pbSongOpenPractice { display: inline-flex; align-items: center; gap: 8px; margin: 0; border: none; border-radius: 11px; padding: 11px 18px; background: #2f8f63; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(47,143,99,.32); transition: transform .1s, box-shadow .15s, filter .15s; } body.pb-song-mode.pb-skin-light #pbSongOpenPractice:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(47,143,99,.4); transform: translateY(-1px); } body.pb-song-mode.pb-skin-light #pbSongOpenPractice:active { transform: translateY(0); } body.pb-song-mode.pb-skin-light #pbSongOpenPractice i { font-size: 15px; } /* лёгкая пульсация-привлечение внимания при появлении отрезка */ body.pb-song-mode.pb-skin-light #pbSongOpenPractice { animation: pbPracticePulse 1.6s ease-in-out 2; } @keyframes pbPracticePulse { 0%, 100% { box-shadow: 0 2px 8px rgba(47,143,99,.32); } 50% { box-shadow: 0 0 0 6px rgba(47,143,99,.16), 0 2px 8px rgba(47,143,99,.32); } } /* закреплённая панель выбранного такта/отрезка: кнопка отработки доступна при любой прокрутке */ body.pb-song-mode.pb-skin-light #pbFloatingLoopBar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6400; display: none; align-items: center; gap: 10px; max-width: min(860px, calc(100vw - 28px)); padding: 10px 12px; background: rgba(255,255,255,.94); border: 1px solid rgba(0,0,0,.10); border-radius: 15px; box-shadow: 0 12px 34px rgba(0,0,0,.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light #pbFloatingLoopBar.pb-on { display: flex; } body.pb-song-mode.pb-skin-light #pbFloatingLoopText { min-width: 0; color: #1d1d1f; font-size: 13px; font-weight: 700; white-space: nowrap; } body.pb-song-mode.pb-skin-light #pbFloatingLoopBar button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin: 0; border-radius: 10px; border: 1px solid rgba(0,0,0,.10); padding: 9px 13px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbFloatingPracticeBtn { border: none !important; background: #2f8f63; color: #fff; box-shadow: 0 2px 8px rgba(47,143,99,.28); } body.pb-song-mode.pb-skin-light #pbFloatingEditBtn { border: none !important; background: var(--accent); color: #fff; } body.pb-song-mode.pb-skin-light #pbFloatingRowBtn { background: #f5f8ff; border-color: rgba(0,113,227,.18); color: var(--accent); } body.pb-song-mode.pb-skin-light #pbFloatingClearBtn { width: 36px; height: 36px; padding: 0 !important; background: #fff; color: #1d1d1f; } body.pb-song-mode.pb-skin-light #pbFloatingLoopBar button:hover { filter: brightness(1.06); } body:not(.pb-song-mode) #pbFloatingLoopBar, body.pb-practice #pbFloatingLoopBar { display: none !important; } /* Быстрый выбор тактов: hit-area занимает всю полосу строки, но не мешает вертикальному свайпу. Hover намеренно слабее синего выбранного диапазона. */ body.pb-song-mode #pbSongSheet .pbMeasureHit { pointer-events: all; cursor: pointer; touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; transition: fill-opacity .09s ease, stroke-opacity .09s ease; } @media (hover: hover) and (pointer: fine) { body.pb-song-mode #pbSongSheet .pbMeasureHit:not(.pb-hit-selected):not(.pb-hit-pending):hover { fill: #007aff !important; fill-opacity: .055 !important; stroke: #007aff !important; stroke-opacity: .20 !important; stroke-width: 1.4 !important; vector-effect: non-scaling-stroke; } } /* Контекстное предложение отработки привязано к выбранной строке через JS. Fixed-позиционирование не меняет размеры листа и не вызывает прыжков нот. */ body.pb-song-mode #pbRangePracticePopover { position: fixed; z-index: 6350; display: none; align-items: center; gap: 8px; max-width: min(720px, calc(100vw - 20px)); min-height: 46px; padding: 7px 8px 7px 12px; box-sizing: border-box; border: 1px solid rgba(0,122,255,.20); border-radius: 13px; background: rgba(255,255,255,.97); box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 2px 8px rgba(0,122,255,.10); color: #1d1d1f; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode #pbRangePracticePopover.pb-on { display: flex; } body.pb-song-mode #pbRangePracticePopover.pb-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } body.pb-song-mode #pbRangePracticeText { min-width: 0; color: #4b5563; font-size: 12px; font-weight: 700; white-space: nowrap; } body.pb-song-mode #pbRangePracticePopover button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; margin: 0; border: 0; border-radius: 9px; font-size: 12.5px; font-weight: 750; line-height: 1; cursor: pointer; white-space: nowrap; } body.pb-song-mode #pbRangePracticeOpen { padding: 0 13px; background: #007aff; color: #fff; box-shadow: 0 2px 8px rgba(0,122,255,.24); } body.pb-song-mode #pbRangePracticeOpen:hover { background: #006ee6; } body.pb-song-mode #pbRangePracticeListen { padding: 0 13px; background: #edf6ff; color: #006ee6; box-shadow: inset 0 0 0 1px rgba(0,122,255,.16); } body.pb-song-mode #pbRangePracticeListen:hover { background: #dfefff; } body.pb-song-mode .pbRangeListenShort { display: none; } body.pb-song-mode #pbRangePracticeClear { width: 36px; flex: 0 0 36px; padding: 0; background: #f2f2f7; color: #6e6e73; } body:not(.pb-song-mode) #pbRangePracticePopover, body.pb-practice #pbRangePracticePopover { display: none !important; } body.pb-student-dark #pbRangePracticePopover { border-color: rgba(10,132,255,.34); background: rgba(28,28,30,.97); color: #f5f5f7; box-shadow: 0 12px 34px rgba(0,0,0,.38); } body.pb-student-dark #pbRangePracticeText { color: #d1d1d6; } body.pb-student-dark #pbRangePracticeListen { background: rgba(10,132,255,.18); color: #64d2ff; box-shadow: inset 0 0 0 1px rgba(10,132,255,.30); } body.pb-student-dark #pbRangePracticeClear { background: #3a3a3c; color: #f5f5f7; } @media (max-width: 760px) { body.pb-song-mode #pbRangePracticePopover { gap: 6px; min-height: 52px; padding: 6px; border-radius: 12px; } body.pb-song-mode #pbRangePracticeText { display: none; } body.pb-song-mode #pbRangePracticeOpen { min-height: 44px; padding: 0 14px; font-size: 13px; } body.pb-song-mode #pbRangePracticeListen { min-height: 44px; padding: 0 12px; font-size: 13px; } body.pb-song-mode .pbRangeListenLong { display: none; } body.pb-song-mode .pbRangeListenShort { display: inline; } body.pb-song-mode #pbRangePracticeClear { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; } } /* В отработке используется собственный полный блок минусовки; нижний док песни его дублирует. */ body.pb-practice #pbStudentMinus, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus { display: none !important; } @media (max-width: 760px) { body.pb-song-mode.pb-skin-light #pbFloatingLoopBar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; max-width: none; flex-wrap: wrap; justify-content: center; } body.pb-song-mode.pb-skin-light #pbFloatingLoopText { flex: 1 0 100%; text-align: center; white-space: normal; } body.pb-song-mode.pb-skin-light #pbFloatingPracticeBtn { flex: 1 1 auto; } } /* карточка калибровки — белая, светлая волна */ body.pb-song-mode.pb-skin-light #pbLeftPanel #pbBackingWaveWrap { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 16px 18px !important; margin: 12px 0 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.05); } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbBackingWave { background: #f3f4f6 !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 9px !important; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbTbLabel { background: transparent; color: #86868b; padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbBackingTime { color: #6e6e73 !important; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbAnchorList { background: #fff !important; border-color: rgba(0,0,0,.08) !important; } /* --- chrome карточки калибровки (Шаг 4, по образцу) --- */ body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibHead { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibIcon { width: 30px; height: 30px; flex: none; border-radius: 8px; background: #eef3fd; color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 16px; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibTitleWrap { flex: 1; min-width: 0; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibTitle { font-size: 14px; font-weight: 600; color: #1d1d1f; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibSub { font-size: 12px; color: #86868b; line-height: 1.35; margin-top: 2px; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibPill { flex: none; align-self: center; background: #e9f8ee; color: #1f9d4d; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 4px 10px; white-space: nowrap; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibDone { flex: none; align-self: center; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibDone:hover { filter: brightness(1.07); } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibBar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibBar #pbBackingTime { font-size: 13px; color: #6e6e73 !important; font-variant-numeric: tabular-nums; margin: 0 4px; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibPlay { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--accent); background: #fff; color: var(--accent); font-size: 14px; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibPlay:hover { background: #eef3fd; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibStart { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 9px; border: 1px solid rgba(0,0,0,.10); border-radius: 8px; background: #f5f5f7; color: #6e6e73; font-size: 12px; font-weight: 600; white-space: nowrap; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibStart input { width: 54px; height: 26px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.16); border-radius: 7px; background: #fff; color: #1d1d1f; font: 700 13px/1 -apple-system, system-ui, sans-serif; text-align: center; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibStart input:disabled { opacity: .55; cursor: default; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibAdd { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibAdd:hover { filter: brightness(1.07); } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbCalibDel, body.pb-song-mode.pb-skin-light #pbLeftPanel #pbCalibReset { background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #1d1d1f; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbCalibDel:hover, body.pb-song-mode.pb-skin-light #pbLeftPanel #pbCalibReset:hover { background: #f5f5f7; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibSrc { display: flex; gap: 2px; background: #ececf0; border-radius: 9px; padding: 3px; margin-bottom: 12px; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibSrcBtn { flex: 1; border: none; background: transparent; color: #6e6e73; border-radius: 7px; padding: 7px; font-size: 12px; font-weight: 600; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibSrcBtn.pbCalibSrcOn { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0,0,0,.12); } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibSrcBtn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } body.pb-song-mode.pb-skin-light #pbLeftPanel .pbCalibFoot { font-size: 12px; color: #1f9d4d; font-weight: 500; margin-top: 10px; } /* YouTube-плеер в карточке калибровки — скруглить, не «сырой» чёрный блок */ body.pb-song-mode.pb-skin-light #pbLeftPanel #pbBackingYT { border-radius: 12px; overflow: hidden; margin-top: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.08); } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbBackingYT iframe { display: block; border: 0; border-radius: 12px; } /* ===================== ШАГ 5 · ВИД УЧЕНИКА (экран 2) ===================== */ /* Студенческие узлы (минус-строка + «Как репетировать») строятся всегда при светлом скине, но видны только без .pb-admin. У админа они скрыты, инспектор — на месте. */ body.pb-song-mode.pb-skin-light.pb-admin #pbStudentHelp { display: none !important; } /* ВНЕ режима «Песня» (конструктор/правка среза) — прячем студенческие узлы и плавающее YouTube, иначе они «протекают» без стилей и вид кажется сломанным (перебиваем инлайн-display из JS). */ body:not(.pb-song-mode) #pbStudentMinus, body:not(.pb-song-mode) #pbStudentLoopHint, body:not(.pb-song-mode) #pbStudentHelp, body:not(.pb-song-mode) #pbFloatYT { display: none !important; } /* У УЧЕНИКА (нет .pb-admin): прячем правый админ-инспектор, лист на всю ширину */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbToolbar { display: none !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #RightHandContent { padding-right: 0; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLeftPanel { display: none !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLeftPanel #pbSongLoopBar { display: none !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentLoopHint { display: block; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentHelp { display: block; } /* калибровка минуса (волна + «Поставить такт»/«Размечено») — админ-инструмент, ученику не показываем; выбранный отрезок ученик видит в нижней плавающей панели. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbBackingWaveWrap { display: none !important; } body.pb-song-mode.pb-skin-light #pbStudentLoopHint { display: none; max-width: 1180px; margin: 10px auto 0; padding: 0 4px; color: #6e6e73; font: 500 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } /* — строка минуса под транспортом (видимость flex/none ставит pbUpdateStudentUi) — */ body.pb-song-mode.pb-skin-light #pbStudentMinus { align-items: center; gap: 14px; margin: 16px 24px 0; padding: 13px 16px; background: #fff; border: 1px solid rgba(31,122,77,.16); border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuPlay { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; background: #1f7a4d; color: #fff; font-size: 16px; line-height: 42px; padding: 0; box-shadow: 0 4px 12px rgba(31,122,77,.22); } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuPlay:hover { background: #17643e; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuBadge { flex: none; width: 34px; height: 34px; border-radius: 8px; background: #eef7f2; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #1f7a4d; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuMeta { flex: 0 1 auto; min-width: 0; max-width: 300px; } /* шкала перемотки минуса — ученик ставит позицию, ноты встают на то же место */ body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSeekWrap { flex: 1; min-width: 90px; display: flex; align-items: center; gap: 10px; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSeekWrap input[type="range"] { flex: 1; min-width: 60px; accent-color: #1f7a4d; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuTime { flex: 0 0 auto; font-size: 11px; color: #86868b; font-variant-numeric: tabular-nums; white-space: nowrap; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuLabel { margin-bottom: 2px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1f7a4d; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuName { font-size: 14px; font-weight: 600; color: #1d1d1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSub { font-size: 12px; color: #86868b; margin-top: 1px; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuTrackSeg { flex: 0 0 auto; display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: #ececf0; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuTrackBtn { min-width: 68px; height: 30px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: #6e6e73; font: 800 11px/1 -apple-system, system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuTrackBtn.pbTrackOn { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0,0,0,.12); } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuTrackBtn:disabled { opacity: .42; cursor: default; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuMetronome { flex: 0 0 auto; height: 36px; padding: 0 12px; border: 1px solid rgba(0,0,0,.10); border-radius: 9px; background: #f5f5f7; color: #1d1d1f; font: 800 11px/1 -apple-system, system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuMetronome.pb-on { background: #1f7a4d; color: #fff; border-color: #1f7a4d; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuMetronome:disabled { opacity: .42; cursor: default; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSpeed { display: flex; align-items: center; gap: 8px; flex: none; font-size: 12px; color: #6e6e73; white-space: nowrap; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSpeed input[type="range"] { width: 120px; accent-color: #1f7a4d; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSpeedLbl { min-width: 38px; font-weight: 600; color: #1d1d1f; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSpeedPresets { display: none; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuModeGroup { display: contents; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuWave { display: none; } body.pb-song-mode.pb-skin-light .pbMobilePanelToggle { display: none; } #pbMobileSheet { display: none; } @media (min-width: 641px) { body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 280; height: 76px; min-height: 0; margin: 0; padding: 9px 24px; box-sizing: border-box; overflow: hidden; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; box-shadow: 0 -8px 24px rgba(0,0,0,.08); } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuLabel { display: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #RightHandContent { top: 140px; height: calc(100vh - 216px); padding-bottom: 82px; overflow-y: auto; overflow-x: hidden; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-playing #pbStudentMinus .pbStuPlay { background: #b03a2e; box-shadow: 0 4px 12px rgba(176,58,46,.22); } } /* ===================== МОБИЛЬНЫЙ УЧЕНИЧЕСКИЙ ПРОТОТИП ===================== Телефон получает отдельную оболочку занятия: строки нот крупно, A4-лист остаётся доступен переключателем и не влияет на десктоп/планшет. */ @media (max-width: 640px) { html, body.pb-song-mode.pb-skin-light { overflow-x: hidden !important; } body.pb-song-mode.pb-skin-light #TopNav { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-rows: 40px 30px; height: 86px; min-height: 86px; padding: 6px 10px 8px; gap: 2px 8px; overflow: visible; z-index: 120; } body.pb-song-mode.pb-skin-light #pbLightBrand { grid-column: 1 / 4; grid-row: 1; justify-self: center; align-self: center; width: 158px; height: 40px; } body.pb-song-mode.pb-skin-light.pb-admin #pbLightBrand { width: 158px; height: 40px; } body.pb-song-mode.pb-skin-light .pbBrandLogo { height: 40px; } body.pb-song-mode.pb-skin-light.pb-admin .pbBrandLogo { height: 40px; } body.pb-song-mode.pb-skin-light #pbLightTitle { grid-column: 1 / 4; grid-row: 2; width: 100%; flex: 1 1 auto; align-items: center; padding: 2px 4px; min-width: 0; text-align: center; } body.pb-song-mode.pb-skin-light .pbLightTitleMain { width: 100%; justify-content: center; gap: 5px; font-size: 13px; line-height: 1.15; } body.pb-song-mode.pb-skin-light .pbLightTitleMeta { display: none; } body.pb-song-mode.pb-skin-light #pbLightTitleText { max-width: calc(100vw - 54px); } body.pb-song-mode.pb-skin-light #pbLightSaveBtn { display: none !important; } body.pb-song-mode.pb-skin-light #pbSongTools { display: flex !important; align-items: center; gap: 8px; position: fixed; left: 0; right: 0; top: 86px; z-index: 119; height: 48px; padding: 6px 10px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: rgba(246,246,248,.96); border-bottom: 1px solid rgba(0,0,0,.07); box-shadow: 0 8px 20px rgba(0,0,0,.04); } body.pb-song-mode.pb-skin-light #pbSongTools::-webkit-scrollbar { display: none; } body.pb-song-mode.pb-skin-light #pbSongTools .pbSongZoom, body.pb-song-mode.pb-skin-light #drumVizToggleTop, body.pb-song-mode.pb-skin-light #legendToggleButton, body.pb-song-mode.pb-skin-light #pageLayoutToggleButton, body.pb-song-mode.pb-skin-light #pbUndoTopButton { display: none !important; } body.pb-song-mode.pb-skin-light #catalogTopButton, body.pb-song-mode.pb-skin-light #favoriteTopButton, body.pb-song-mode.pb-skin-light #collectionTopButton { display: inline-flex !important; flex: 0 0 auto; align-items: center; justify-content: center; height: 36px; min-width: 0; padding: 0 10px; border-radius: 10px; font-size: 12px; font-weight: 800; white-space: nowrap; } body.pb-song-mode.pb-skin-light #favoriteTopButton .pbSongToolLbl, body.pb-song-mode.pb-skin-light #collectionTopButton .pbSongToolLbl { display: none !important; } body.pb-song-mode.pb-skin-light #pbLightViewBtn { display: none !important; } body.pb-song-mode.pb-skin-light.pb-has-admin #pbLightViewBtn { display: inline-flex !important; align-items: center; justify-content: center; width: auto; min-width: 74px; height: 36px; padding: 0 10px; border-radius: 10px; gap: 5px; font-size: 12px; font-weight: 800; } body.pb-song-mode.pb-skin-light.pb-has-admin #pbLightViewBtn #pbLightViewLbl { display: inline; } body.pb-song-mode.pb-skin-light #upperRight { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; margin-left: 0; min-width: 40px; gap: 0; z-index: 2; } body.pb-song-mode.pb-skin-light #upperRight #pbSongClose, body.pb-song-mode.pb-skin-light #upperRight #pbLightViewBtn { display: none !important; } body.pb-song-mode.pb-skin-light #burgerMenuToggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 10px; } body.pb-song-mode.pb-skin-light #burgerDropdown { position: fixed !important; top: 136px !important; right: 8px !important; left: auto !important; width: min(300px, calc(100vw - 16px)) !important; max-height: calc(100vh - 68px); overflow-y: auto; } body.pb-song-mode.pb-skin-light #midiPlayer { top: 134px; bottom: auto; left: 0; width: 100%; height: 74px; z-index: 112; border-top: 0; border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 0; box-shadow: 0 10px 24px rgba(0,0,0,.06); } body.pb-song-mode.pb-skin-light #playerControl1 { height: 74px; } body.pb-song-mode.pb-skin-light #playerControlsRow1 { position: relative; min-height: 74px; height: 74px; padding: 8px 82px 8px 10px; gap: 10px; } body.pb-song-mode.pb-skin-light .pbMobilePanelToggle { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; height: 28px; padding: 0 9px; margin: 0; border: 1px solid rgba(0,0,0,.10); border-radius: 999px; background: rgba(255,255,255,.90); color: #1d1d1f; font: 800 11px/1 -apple-system, system-ui, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: pointer; } body.pb-song-mode.pb-skin-light #pbNotesCollapseBtn { position: absolute; right: 10px; top: 9px; z-index: 3; } body.pb-song-mode.pb-skin-light #midiPlayImage1.midiPlayImage { width: 48px; height: 48px; line-height: 48px; font-size: 20px; } body.pb-song-mode.pb-skin-light .pbNotesTransportMeta { flex: 1 1 auto; min-width: 0; max-width: none; } body.pb-song-mode.pb-skin-light .pbNotesTransportTitle { font-size: 13px; overflow: hidden; text-overflow: ellipsis; } body.pb-song-mode.pb-skin-light .pbNotesTransportSub { font-size: 10px; } body.pb-song-mode.pb-skin-light #MIDIPlayTime1.MIDIPlayTime, body.pb-song-mode.pb-skin-light .tempoLabel, body.pb-song-mode.pb-skin-light .tempoInput, body.pb-song-mode.pb-skin-light #metronomeContainer { display: none !important; } body.pb-song-mode.pb-skin-light .tempoAndProgress { flex: 0 0 auto; width: auto; } body.pb-song-mode.pb-skin-light .tempoRow { width: auto; gap: 0; } body.pb-song-mode.pb-skin-light .tempoTextField { width: 50px; height: 34px; padding: 4px 0; font-size: 17px; } body.pb-song-mode.pb-skin-light #RightHandContent { position: fixed; top: 208px; left: 0; right: 0; bottom: 0; width: 100vw !important; min-width: 0; max-width: 100vw; height: auto; padding-right: 0; margin-left: 0; padding-bottom: calc(244px + env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #midiPlayer { height: 42px; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #playerControl1, body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #playerControlsRow1 { min-height: 42px; height: 42px; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #playerControlsRow1 { padding-top: 4px; padding-bottom: 4px; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #midiPlayImage1.midiPlayImage { width: 34px; height: 34px; line-height: 34px; font-size: 15px; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed .pbNotesTransportSub, body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed .tempoAndProgress { display: none !important; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #RightHandContent { top: 176px; height: auto; } body.pb-song-mode.pb-skin-light #GrooveWriter { width: 100vw; min-width: 0; max-width: 100vw; overflow-x: hidden; } body.pb-song-mode.pb-skin-light #pbLeftPanel { display: none; max-width: 100%; padding: 10px 10px 0; box-sizing: border-box; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongLoopBar { margin: 0; padding: 10px 12px; border-radius: 12px; gap: 8px; font-size: 12.5px; } body.pb-song-mode.pb-skin-light #pbLeftPanel #pbSongLoopHint { min-width: 0; line-height: 1.35; } body.pb-song-mode.pb-skin-light #pbStudentMinus { position: fixed; left: 0; right: 0; bottom: 0; z-index: 111; flex-wrap: wrap; gap: 10px; margin: 0; padding: 10px 86px calc(12px + env(safe-area-inset-bottom)) 12px; width: 100%; max-width: 100%; box-sizing: border-box; border-radius: 16px 16px 0 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -10px 28px rgba(0,0,0,.10); } body.pb-song-mode.pb-skin-light #pbMinusCollapseBtn { position: absolute; right: 10px; top: 10px; z-index: 3; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuPlay { width: 46px; height: 46px; line-height: 46px; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuBadge { width: 32px; height: 32px; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuMeta { flex: 1 1 calc(100% - 98px); max-width: none; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSeekWrap { order: 3; flex: 1 1 100%; min-width: 0; gap: 8px; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuTrackSeg { order: 2; flex: 1 1 auto; min-width: 164px; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuTrackBtn { flex: 1; min-width: 0; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuMetronome { order: 2; flex: 0 0 auto; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSeekWrap input[type="range"] { min-width: 0; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuTime { min-width: 84px; text-align: right; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSpeed { order: 4; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; white-space: normal; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSpeed input[type="range"] { display: none; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSpeedLbl { min-width: 0; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSpeedPresets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSpeedPreset { height: 34px; border: 1px solid rgba(0,0,0,.10); border-radius: 9px; background: #f5f5f7; color: #1d1d1f; font: 700 12px/1 -apple-system, system-ui, sans-serif; } body.pb-song-mode.pb-skin-light #pbStudentMinus .pbStuSpeedPreset.pb-on { background: #1f7a4d; color: #fff; border-color: #1f7a4d; } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #RightHandContent { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #pbStudentMinus { flex-wrap: nowrap; min-height: 48px; padding-top: 7px; padding-bottom: calc(7px + env(safe-area-inset-bottom)); align-items: center; } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #pbStudentMinus .pbStuPlay { width: 34px; height: 34px; line-height: 34px; font-size: 14px; } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #pbStudentMinus .pbStuBadge, body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #pbStudentMinus .pbStuSub, body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #pbStudentMinus .pbStuTrackSeg, body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #pbStudentMinus .pbStuMetronome, body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #pbStudentMinus .pbStuSeekWrap, body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #pbStudentMinus .pbStuSpeed { display: none !important; } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #pbStudentMinus .pbStuLabel { margin-bottom: 0; font-size: 9px; } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed #pbStudentMinus .pbStuName { font-size: 13px; } body.pb-song-mode.pb-skin-light #pbStudentLoopHint { display: none !important; } body.pb-song-mode #pbSheetScroll, body.pb-song-mode.pb-skin-light #pbSheetScroll { width: 100%; max-width: 100%; overflow-x: hidden !important; box-sizing: border-box; } body.pb-song-mode.pb-skin-light #pbSongSheet, body.pb-song-mode.pb-skin-light.pb-spread #pbSongSheet, body.pb-song-mode.pb-skin-light.pb-stack #pbSongSheet, body.pb-song-mode.pb-skin-light.pb-zoomed #pbSongSheet { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 10px 0 18px !important; padding: 0 !important; box-sizing: border-box; } body.pb-song-mode.pb-skin-light #pbSongSheet > div[id^="osmdCanvasPage"], body.pb-song-mode.pb-skin-light.pb-spread #pbSongSheet > div[id^="osmdCanvasPage"], body.pb-song-mode.pb-skin-light.pb-stack #pbSongSheet > div[id^="osmdCanvasPage"], body.pb-song-mode.pb-skin-light.pb-zoomed #pbSongSheet > div[id^="osmdCanvasPage"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 10px !important; padding: 8px 6px 10px !important; border-radius: 0 !important; box-sizing: border-box; } body.pb-song-mode.pb-skin-light #pbSongSheet svg { width: 100% !important; max-width: 100% !important; height: auto !important; } body.pb-song-mode.pb-skin-light #pbSongSheet .pbMeasureNum { display: none !important; } body.pb-song-mode.pb-skin-light #pbMobileSheet { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px 0 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-mobile-a4 #pbMobileSheet { display: block !important; padding-bottom: 0; } body.pb-song-mode.pb-skin-light.pb-mobile-a4 #pbMobileSheet .pbMobileRows { display: none !important; } body.pb-song-mode.pb-skin-light.pb-mobile-a4 #pbMobileSheet .pbMobileSheetHead { margin-bottom: 0; } body.pb-song-mode.pb-skin-light .pbMobileSheetHead { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; background: rgba(246,246,248,.94); border-bottom: 1px solid rgba(0,0,0,.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.pb-song-mode.pb-skin-light .pbMobileSheetTitle { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } body.pb-song-mode.pb-skin-light .pbMobileSheetTitle span { color: #1d1d1f; font-size: 14px; font-weight: 800; line-height: 1.18; } body.pb-song-mode.pb-skin-light .pbMobileSheetTitle small { color: #6e6e73; font-size: 11px; line-height: 1.25; white-space: normal; overflow: visible; } body.pb-song-mode.pb-skin-light .pbMobileSheetSeg { flex: none; display: flex; gap: 2px; padding: 3px; background: #e8e8ed; border-radius: 8px; } body.pb-song-mode.pb-skin-light .pbMobileModeBtn { min-width: 76px; height: 32px; margin: 0; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #6e6e73; font: 800 12px/1 -apple-system, system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light .pbMobileModeBtn.pb-on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0,0,0,.14); } body.pb-song-mode.pb-skin-light .pbMobileRows { display: none; flex-direction: column; gap: 0; padding: 0 10px; background: #fff; } body.pb-song-mode.pb-skin-light .pbMobileRow { overflow: hidden; margin: 0; background: #fff; border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid rgba(0,0,0,.045); } body.pb-song-mode.pb-skin-light .pbMobileRow.pb-on { border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(0,122,255,.18); } body.pb-song-mode.pb-skin-light .pbMobileRow.pb-pending { border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(0,122,255,.30); } body.pb-song-mode.pb-skin-light .pbMobileRow.pb-cursor { border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(47,143,99,.18); } body.pb-song-mode.pb-skin-light .pbMobileRowTop { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px 7px 11px; border-bottom: 1px solid rgba(0,0,0,.06); background: #fbfbfd; } body.pb-song-mode.pb-skin-light .pbMobileRowNo { min-width: 0; color: #1d1d1f; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.pb-song-mode.pb-skin-light .pbMobileRowTake { flex: none; height: 28px; margin: 0; padding: 0 10px; border: 1px solid rgba(47,143,99,.22); border-radius: 7px; background: #eef7f2; color: #1f7a4d; font: 800 11px/1 -apple-system, system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light .pbMobileSvgWrap { overflow: hidden; background: #fff; touch-action: manipulation; } body.pb-song-mode.pb-skin-light .pbMobileRowSvg { display: block; width: 100%; max-width: 100%; height: auto; background: #fff; } body.pb-song-mode.pb-skin-light .pbMobileSongCursor { pointer-events: none; } body.pb-song-mode.pb-skin-light .pbMobileMeasureHit { cursor: pointer; pointer-events: all; } body.pb-song-mode.pb-skin-light .pbMobileEmpty { padding: 18px 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: #fff; color: #6e6e73; font-size: 13px; text-align: center; } body.pb-song-mode.pb-skin-light #pbStudentHelp { margin: 10px 10px 22px; padding: 14px 14px; border-radius: 14px; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuHelpIntro { font-size: 12.5px; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameHd { padding: 12px 0; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameRow { flex-wrap: wrap; gap: 8px; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameLbl { width: auto; flex: 1 1 100%; } body.pb-song-mode.pb-skin-light #pbFloatingLoopBar { bottom: calc(86px + env(safe-area-inset-bottom)); } } /* Подсказка ученику перед выбором куплета, припева или другого фрагмента. */ #pbFragmentPracticeHint { position: fixed; inset: 0; z-index: 7200; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background: rgba(15,23,42,.48); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } #pbFragmentPracticeHint.pb-open { display: flex; } #pbFragmentPracticeHint .pbFragmentPracticeHintCard { position: relative; width: min(470px, 100%); padding: 28px; box-sizing: border-box; border: 1px solid rgba(15,23,42,.10); border-radius: 20px; background: #fff; color: #111827; box-shadow: 0 24px 70px rgba(15,23,42,.28); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #pbFragmentPracticeHint .pbFragmentPracticeHintClose { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #f2f2f7; color: #3a3a3c; cursor: pointer; font: 600 23px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #pbFragmentPracticeHint .pbFragmentPracticeHintIcon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(94,92,230,.12); color: #5e5ce6; font-size: 21px; } #pbFragmentPracticeHint h2 { margin: 16px 42px 8px 0; font-size: 24px; line-height: 1.15; } #pbFragmentPracticeHint p { margin: 0; color: #5f6978; font-size: 14px; line-height: 1.45; } #pbFragmentPracticeHint .pbFragmentPracticeVisual { margin: 16px 0 14px; padding: 10px; border: 1px solid #dbe3ee; border-radius: 14px; background: #f8fafc; } #pbFragmentPracticeHint .pbFragmentPracticeVisual svg { display: block; width: 100%; height: auto; } #pbFragmentPracticeHint .pbFragmentPracticeVisualBg { fill: #fff; stroke: #e5e7eb; stroke-width: 2; } #pbFragmentPracticeHint .pbFragmentPracticeVisualRange { fill: rgba(10,132,255,.08); } #pbFragmentPracticeHint .pbFragmentPracticeVisualStaff { fill: none; stroke: #7b8491; stroke-width: 1.5; } #pbFragmentPracticeHint .pbFragmentPracticeVisualNotes { fill: #1f2937; stroke: #1f2937; stroke-width: 2; stroke-linecap: round; } #pbFragmentPracticeHint .pbFragmentPracticeVisualPick { fill: rgba(10,132,255,.12); stroke: #0a84ff; stroke-width: 4; } #pbFragmentPracticeHint .pbFragmentPracticeVisualBadge circle { fill: #0a84ff; } #pbFragmentPracticeHint .pbFragmentPracticeVisualBadge text { fill: #fff; font: 800 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-anchor: middle; } #pbFragmentPracticeHint .pbFragmentPracticeVisualLabels { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 5px; color: #3d4755; font: 700 10px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #pbFragmentPracticeHint .pbFragmentPracticeVisualLabels span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } #pbFragmentPracticeHint .pbFragmentPracticeVisualLabels b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #0a84ff; color: #fff; font-size: 10px; } #pbFragmentPracticeHint .pbFragmentPracticeVisualLabels i { color: #0a84ff; font-size: 9px; font-style: normal; text-align: center; } #pbFragmentPracticeHint ol { margin: 18px 0 14px; padding-left: 24px; } #pbFragmentPracticeHint li { margin: 9px 0; padding-left: 4px; font-size: 14px; line-height: 1.4; } #pbFragmentPracticeHint .pbFragmentPracticeHintOne { font-size: 12px; } #pbFragmentPracticeHint .pbFragmentPracticeHintStart { width: 100%; min-height: 46px; margin-top: 20px; padding: 0 18px; border: 0; border-radius: 12px; background: #5e5ce6; color: #fff; cursor: pointer; font: 750 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #pbFragmentPracticeHint .pbFragmentPracticeHintStart:hover { background: #4d4bd1; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools #pbFragmentPracticeTop { color: #bf5af2 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools #pbFragmentPracticeTop:hover { background: rgba(191,90,242,.16) !important; } body.pb-student-dark #pbFragmentPracticeHint .pbFragmentPracticeHintCard { border-color: rgba(255,255,255,.11); background: #1c1c1e; color: #f5f5f7; } body.pb-student-dark #pbFragmentPracticeHint .pbFragmentPracticeHintClose { background: #2c2c2e; color: #f5f5f7; } body.pb-student-dark #pbFragmentPracticeHint p { color: #a1a1a6; } body.pb-student-dark #pbFragmentPracticeHint .pbFragmentPracticeVisual { border-color: rgba(255,255,255,.11); background: #111114; } body.pb-student-dark #pbFragmentPracticeHint .pbFragmentPracticeVisualBg { fill: #1c1c1e; stroke: #3a3a3c; } body.pb-student-dark #pbFragmentPracticeHint .pbFragmentPracticeVisualStaff { stroke: #98989d; } body.pb-student-dark #pbFragmentPracticeHint .pbFragmentPracticeVisualNotes { fill: #f5f5f7; stroke: #f5f5f7; } body.pb-student-dark #pbFragmentPracticeHint .pbFragmentPracticeVisualLabels { color: #d1d1d6; } @media (max-width: 600px) { #pbFragmentPracticeHint { padding: 12px; align-items: flex-end; } #pbFragmentPracticeHint .pbFragmentPracticeHintCard { max-height: calc(100dvh - 24px); padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 20px 20px 14px 14px; } #pbFragmentPracticeHint h2 { font-size: 21px; } #pbFragmentPracticeHint .pbFragmentPracticeVisualLabels { grid-template-columns: 1fr 1fr; } #pbFragmentPracticeHint .pbFragmentPracticeVisualLabels i { display: none; } #pbFragmentPracticeHint .pbFragmentPracticeVisualLabels span:last-child { justify-self: end; } } @media (min-width: 641px) and (max-width: 980px) and (max-height: 520px) and (orientation: landscape) { body.pb-song-mode.pb-skin-light #TopNav { height: 50px; min-height: 50px; padding: 0 10px; } body.pb-song-mode.pb-skin-light #pbLightTitle { padding: 4px 2px; } body.pb-song-mode.pb-skin-light #pbLightBrand { width: 42px; height: 34px; } body.pb-song-mode.pb-skin-light .pbBrandLogo { height: 34px; } body.pb-song-mode.pb-skin-light .pbMobilePanelToggle { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; height: 28px; padding: 0 9px; margin: 0; border: 1px solid rgba(0,0,0,.10); border-radius: 999px; background: rgba(255,255,255,.92); color: #1d1d1f; font: 800 11px/1 -apple-system, system-ui, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: pointer; } body.pb-song-mode.pb-skin-light #midiPlayer { top: 50px; height: 64px; } body.pb-song-mode.pb-skin-light #playerControl1, body.pb-song-mode.pb-skin-light #playerControlsRow1 { min-height: 64px; height: 64px; } body.pb-song-mode.pb-skin-light #playerControlsRow1 { position: relative; padding: 7px 92px 7px 10px; gap: 10px; } body.pb-song-mode.pb-skin-light #midiPlayImage1.midiPlayImage { width: 42px; height: 42px; line-height: 42px; font-size: 18px; } body.pb-song-mode.pb-skin-light .tempoAndProgress, body.pb-song-mode.pb-skin-light #MIDIPlayTime1.MIDIPlayTime, body.pb-song-mode.pb-skin-light #metronomeContainer { display: none !important; } body.pb-song-mode.pb-skin-light #pbNotesCollapseBtn { position: absolute; right: 10px; top: 18px; z-index: 3; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #midiPlayer { height: 42px; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #playerControl1, body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #playerControlsRow1 { min-height: 42px; height: 42px; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #playerControlsRow1 { padding-top: 4px; padding-bottom: 4px; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #midiPlayImage1.midiPlayImage { width: 34px; height: 34px; line-height: 34px; font-size: 15px; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed .pbNotesTransportSub { display: none !important; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed #pbNotesCollapseBtn { top: 7px; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus { top: auto; bottom: 0; height: 116px; min-height: 0; padding: 8px 92px 8px 12px; gap: 7px 10px; flex-wrap: wrap; align-content: center; border-top: 1px solid rgba(31,122,77,.16); border-bottom: 0; box-shadow: 0 -8px 22px rgba(0,0,0,.10); } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuPlay { width: 42px; height: 42px; line-height: 42px; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuMeta { flex: 1 1 170px; max-width: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuName { font-size: 13px; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuSeekWrap { order: 3; flex: 1 1 420px; min-width: 220px; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuSpeed { order: 3; flex: 0 0 190px; gap: 6px; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuSpeed input[type="range"] { width: 92px; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuTrackSeg { order: 2; flex: 0 0 auto; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuTrackBtn { min-width: 64px; height: 28px; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuMetronome { order: 2; height: 32px; padding: 0 10px; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbMinusCollapseBtn { position: absolute; right: 10px; top: 44px; z-index: 3; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #RightHandContent { top: 114px; height: calc(100vh - 114px); padding-bottom: 126px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed:not(.pb-admin).pb-student-minus-visible #RightHandContent { top: 92px; height: calc(100vh - 92px); } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #RightHandContent { padding-bottom: 56px; } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #pbStudentMinus { height: 46px; padding-top: 5px; padding-bottom: 5px; flex-wrap: nowrap; } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuPlay { width: 34px; height: 34px; line-height: 34px; font-size: 14px; } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuBadge, body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuSub, body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuTrackSeg, body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuMetronome, body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuSeekWrap, body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuSpeed { display: none !important; } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #pbMinusCollapseBtn { top: 9px; } } /* — карточка «Как репетировать» под листом — */ body.pb-song-mode.pb-skin-light #pbStudentHelp { margin: 8px 24px 32px; padding: 18px 20px; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuHelpHd { font-size: 15px; font-weight: 600; color: #1d1d1f; margin-bottom: 6px; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuHelpIntro { font-size: 13px; line-height: 1.5; color: #6e6e73; margin-bottom: 14px; } /* две колонки в ряд (Метроном | Контроль игры), разделённые вертикальной чертой — как на макете */ body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuHelpRow { display: flex; align-items: stretch; border-top: 1px solid rgba(0,0,0,.06); } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuCol { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 4px; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuCol + .pbStuCol { border-left: 1px solid rgba(0,0,0,.06); padding-left: 18px; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuColIco { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #f0f0f3; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #6e6e73; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuColTx { flex: 1; min-width: 0; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuColTitle { font-size: 14px; font-weight: 600; color: #1d1d1f; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuColNote { font-size: 12px; color: #86868b; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuCol input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; cursor: pointer; margin: 0; width: 42px; height: 25px; border-radius: 13px; background: #e2e2e7; position: relative; transition: background .15s; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuCol input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuCol input[type="checkbox"]:checked { background: #34c759; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuCol input[type="checkbox"]:checked::after { left: 19px; } /* — «Контроль игры»: раскрывающаяся карточка с настройками микрофона (как в админ-инспекторе) — */ body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameCard { flex: 1; min-width: 0; border-top: 1px solid rgba(0,0,0,.06); } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameHd { display: flex; align-items: center; gap: 12px; padding: 14px 4px; cursor: pointer; user-select: none; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameChevron { flex: none; margin-left: auto; color: #86868b; font-size: 13px; transition: transform .15s; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameCard.open .pbStuGameChevron { transform: rotate(180deg); } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameBody { display: none; padding: 4px 4px 10px; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameCard.open .pbStuGameBody { display: block; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameRow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(0,0,0,.05); } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameLbl { flex: none; width: 140px; font-size: 13px; color: #1d1d1f; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameSel { flex: 1; min-width: 0; height: 32px; border-radius: 8px; border: 1px solid rgba(0,0,0,.15); background: #fff; padding: 0 8px; font: 400 13px/1 -apple-system, system-ui, sans-serif; color: #1d1d1f; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameRow input[type="range"] { flex: 1; min-width: 0; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameOffVal { flex: none; width: 52px; text-align: right; font-size: 12px; color: #86868b; } /* тумблер «Слушать микрофон» */ body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameRow input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; cursor: pointer; margin: 0 0 0 auto; width: 42px; height: 25px; border-radius: 13px; background: #e2e2e7; position: relative; transition: background .15s; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameRow input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameRow input[type="checkbox"]:checked { background: #34c759; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameRow input[type="checkbox"]:checked::after { left: 19px; } /* кнопка запуска */ body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameGo { margin-top: 12px; width: 100%; height: 40px; border: none; border-radius: 10px; background: #2f8f63; color: #fff; font: 600 14px/1 -apple-system, system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameGo:hover { filter: brightness(1.06); } body.pb-song-mode.pb-skin-light #pbStudentHelp .pbStuGameGo.pbStuGameGoOn { background: #b03a2e; } /* Current song is a navigation state only; it appears in the compact student rail. */ #pbStudentRailCurrent { display: none; } #pbStudentSheetActions { display: none; } /* ===================== DESKTOP · УЧЕНИК: APPLE-STYLE RAIL + НИЖНИЙ ДОК ===================== The working controls keep their existing ids and handlers. Only their desktop composition changes. */ @media (min-width: 900px) { body.pb-song-mode.pb-skin-light:not(.pb-admin) { --pbStudentRailW: 112px; --pbStudentHeaderH: 72px; --pbStudentDockH: 82px; --pbSelectionDockW: 310px; --pbAppleBlue: #007aff; --accent: #007aff; overflow: hidden; background: #f5f5f7; } /* Narrow navigation rail. The title and zoom remain children of TopNav but are fixed in the header. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #TopNav { position: fixed; inset: 0 auto 0 0; width: var(--pbStudentRailW); height: 100vh; height: 100dvh; min-height: 0; padding: max(8px, env(safe-area-inset-top, 0px)) 6px max(8px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; overflow: hidden; background: rgba(251,251,252,.98); border-right: 1px solid rgba(0,0,0,.08); border-bottom: 0; box-shadow: none; z-index: 220; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightBrand { display: flex; width: 100px; height: 52px; flex: 0 0 52px; align-items: center; justify-content: center; overflow: hidden; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch { display: none !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) .pbBrandLogo { width: 100px; height: 32px; max-width: 100px; object-fit: contain; } /* Compact song header from the mockup. The pseudo-control is part of the existing catalog button. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightTitle { position: fixed; left: var(--pbStudentRailW); top: 0; right: 0; width: auto; height: var(--pbStudentHeaderH); max-width: none; min-width: 0; padding: 0 296px 0 22px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 0; border-bottom: 1px solid rgba(0,0,0,.08); border-radius: 0; background: rgba(255,255,255,.98); text-align: left; z-index: 215; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightTitle:hover { background: #fff; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightTitle::after { content: "⌄ Сменить песню"; position: absolute; right: 156px; top: 18px; width: 136px; height: 36px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(0,0,0,.10); border-radius: 7px; background: #fff; color: #3a3a3c; font: 600 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light:not(.pb-admin) .pbLightTitleMain { width: 100%; font-size: 17px; font-weight: 750; line-height: 1.2; } body.pb-song-mode.pb-skin-light:not(.pb-admin) .pbLightTitleMain svg { display: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin) .pbLightTitleMeta { width: 100%; margin-top: 3px; font-size: 11px; line-height: 1.2; color: #86868b; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools { width: 100%; display: flex !important; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: stretch; gap: 3px; margin-top: 2px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools::-webkit-scrollbar { width: 5px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(134,134,139,.35); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools .pbSongZoom { position: fixed; top: 18px; right: 24px; width: 120px; height: 36px; padding: 0; display: flex; overflow: hidden; border: 1px solid rgba(0,0,0,.10); border-radius: 7px; background: #fff; z-index: 218; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools .pbSongZoom button { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 15px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbZoomLabelTop { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 650; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools .pbSongTool { width: 100px; height: 57px; min-height: 57px; padding: 5px 2px 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0 !important; border-radius: 6px; background: transparent !important; color: #5f6368 !important; box-shadow: none !important; font-size: 16px; line-height: 1; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools .pbSongTool:hover { background: #f1f1f3 !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools .pbSongToolLbl { display: block; max-width: 96px; color: inherit; font: 500 10px/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; white-space: normal; text-align: center; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbStudentRailCurrent { order: 1; display: inline-flex; position: relative; background: #fff3ec !important; color: #f05a24 !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbStudentRailCurrent::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #f05a24; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #catalogTopButton { order: 2; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #collectionTopButton { order: 3; display: inline-flex !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #helpTopButton { order: 4; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbWholeSongPracticeTop { order: 8; display: inline-flex !important; color: #0a84ff !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbWholeSongPracticeTop .pbSongToolLbl { font-weight: 700; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbWholeSongPracticeTop:hover, body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-practice-whole-song #pbSongTools #pbWholeSongPracticeTop { background: rgba(10,132,255,.10) !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbFragmentPracticeTop { order: 9; display: inline-flex !important; height: 70px; min-height: 70px; color: #5e5ce6 !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbFragmentPracticeTop:hover { background: rgba(94,92,230,.10) !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbFragmentPracticeTop .pbSongToolLbl { font-weight: 700; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbFragmentPracticeTop .pbSongToolLbl small { display: block; margin-top: 3px; font-size: 8px; font-weight: 600; line-height: 1.15; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #profileTopButton { order: 10; display: inline-flex !important; margin-top: 0; margin-bottom: 2px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pageLayoutToggleButton { order: 6; display: inline-flex !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #legendToggleButton { order: 7; display: inline-flex !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools .pbSongProfileIcon { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: radial-gradient(circle at 50% 33%, currentColor 0 4px, transparent 4.5px), radial-gradient(ellipse at 50% 100%, currentColor 0 9px, transparent 9.5px); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #favoriteTopButton, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #drumVizToggleTop, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbUndoTopButton { display: none !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentSheetActions { position: fixed; top: 90px; right: 24px; z-index: 230; display: flex; align-items: center; gap: 7px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentSheetActions button { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,.09); border-radius: 6px; background: rgba(255,255,255,.94); color: #5f6368; box-shadow: 0 1px 2px rgba(0,0,0,.05); font-size: 13px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentSheetActions button:hover { background: #f5f5f7; color: #1d1d1f; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #upperRight { position: fixed; left: 6px; bottom: 8px; width: 100px; min-width: 0; margin: 0; display: flex; z-index: 224; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #upperRight > * { display: none !important; } body.pb-song-mode.pb-skin-light.pb-has-admin:not(.pb-admin) #pbLightViewBtn { display: flex !important; width: 100px; height: 54px; min-width: 100px; padding: 5px 2px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 6px; background: #1d1d1f; color: #fff; box-shadow: none; } body.pb-song-mode.pb-skin-light.pb-has-admin:not(.pb-admin) #pbLightViewBtn::before { content: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightViewLbl { display: inline; font-size: 10px; line-height: 1.05; } /* The separate MIDI block is intentionally absent in the supplied student layout. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #midiPlayer { display: none !important; } /* Notation owns all available space between the header and the audio dock. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #RightHandContent, body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #RightHandContent, body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-mobile-notes-collapsed #RightHandContent, body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-mobile-minus-collapsed #RightHandContent { position: fixed; left: var(--pbStudentRailW); top: var(--pbStudentHeaderH); right: 0; bottom: var(--pbStudentDockH); width: auto; height: auto; padding: 8px 12px 0; box-sizing: border-box; overflow: hidden; background: #f5f5f7 !important; z-index: 125; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #RightHandContent > .Printable { height: 100%; min-height: 0; overflow: hidden; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSheetScroll { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; box-sizing: border-box; overflow: auto; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 4px 4px 0 0; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongSheet, body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-spread #pbSongSheet, body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-stack #pbSongSheet, body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-zoomed #pbSongSheet { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongSheet > div[id^="osmdCanvasPage"], body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-spread #pbSongSheet > div[id^="osmdCanvasPage"], body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-stack #pbSongSheet > div[id^="osmdCanvasPage"], body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-zoomed #pbSongSheet > div[id^="osmdCanvasPage"] { width: 100% !important; max-width: none !important; min-height: calc(100vh - var(--pbStudentHeaderH) - var(--pbStudentDockH) - 8px); margin: 0 auto 10px !important; border-radius: 3px !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentHelp, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentLoopHint { display: none !important; } /* Existing backing player becomes the slim bottom dock. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus, body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus { position: fixed; left: var(--pbStudentRailW); right: 0; top: auto; bottom: 0; width: auto; height: var(--pbStudentDockH); min-height: var(--pbStudentDockH); max-height: var(--pbStudentDockH); margin: 0; padding: 9px 13px; box-sizing: border-box; display: none; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: visible; border: 0; border-top: 1px solid rgba(0,0,0,.10); border-radius: 0; background: rgba(255,255,255,.98); box-shadow: 0 -4px 18px rgba(0,0,0,.035); z-index: 280; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus { display: flex !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-selection-active #pbStudentMinus { right: var(--pbSelectionDockW); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus::before { content: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuPlay { width: 42px; height: 42px; min-width: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--pbAppleBlue); color: #fff; line-height: 42px; font-size: 15px; box-shadow: 0 4px 12px rgba(0,122,255,.24); } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-playing #pbStudentMinus .pbStuPlay, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuPlay:hover { background: #006ee6; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuBadge, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuLabel { display: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuMeta { flex: 0 0 99px; width: 99px; min-width: 0; max-width: 99px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuName { font-size: 13px; font-weight: 700; line-height: 1.15; color: #1d1d1f; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSub { margin-top: 3px; font-size: 10px; line-height: 1.15; color: #86868b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuModeGroup { flex: 0 0 202px; width: 202px; height: 34px; padding: 3px; box-sizing: border-box; display: flex; align-items: stretch; gap: 2px; border-radius: 8px; background: #ececf0; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuTrackSeg { flex: 1 1 auto; min-width: 0; padding: 0; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: transparent; border-radius: 0; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuTrackBtn, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuMetronome { min-width: 0; height: 28px; margin: 0; padding: 0 7px; display: inline-flex !important; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: #6e6e73; box-shadow: none; font: 600 10px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuTrackBtn.pbTrackOn, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuMetronome.pb-on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 2px rgba(0,0,0,.12); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuTrackBtn:disabled, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuMetronome:disabled { opacity: .4; } /* Waveform is visual; the original range remains above it and owns all seeking. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSeekWrap { position: relative; flex: 1 1 260px; width: auto; min-width: 150px; height: 56px; margin-left: 10px; display: block !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuTimelineCopy { position: absolute; left: 0; right: 0; top: 1px; z-index: 3; min-width: 0; display: flex; flex-direction: column; gap: 1px; pointer-events: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuTimelineCopy b { overflow: hidden; color: #1d1d1f; font: 800 11px/1.05 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; white-space: nowrap; text-overflow: ellipsis; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuTimelineCopy span { overflow: hidden; color: #687386; font: 600 9px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; white-space: nowrap; text-overflow: ellipsis; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuWave { display: block; position: absolute; left: 0; right: 70px; top: 31px; height: 21px; overflow: hidden; pointer-events: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuWaveLayer { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuWaveLayer i { display: block; flex: 1 1 0; min-width: 1px; border-radius: 2px; background: #aeb2b8; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuWaveActive { clip-path: inset(0 calc(100% - var(--pbStuProgress, 0%)) 0 0); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuWaveActive i { background: var(--pbAppleBlue); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus #pbStuSeek { position: absolute; left: 0; top: 29px; z-index: 2; width: calc(100% - 70px); min-width: 0; height: 25px; margin: 0; padding: 0; background: transparent; cursor: pointer; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus #pbStuSeek::-webkit-slider-runnable-track { height: 25px; background: transparent; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus #pbStuSeek::-webkit-slider-thumb, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus #pbStuSeek.touch::-webkit-slider-thumb { width: 3px; height: 25px; margin-top: 0; border: 0; border-radius: 2px; background: var(--pbAppleBlue); box-shadow: 0 0 0 1px rgba(255,255,255,.7); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus #pbStuSeek::-moz-range-track { height: 25px; background: transparent; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus #pbStuSeek::-moz-range-thumb { width: 3px; height: 25px; border: 0; border-radius: 2px; background: var(--pbAppleBlue); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuTime { position: absolute; right: 0; top: 41px; width: 62px; color: #6e6e73; font-size: 10px; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; } /* Speed stays available without widening the dock: hover/focus reveals the existing range. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSpeed { position: absolute; left: 128px; bottom: 8px; flex: none; width: 42px; height: 20px; display: flex !important; align-items: center; justify-content: center; color: transparent; font-size: 0; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSpeedLbl { width: 42px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; color: #86868b; font-size: 9px; font-weight: 650; cursor: default; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSpeed::before { content: "Скорость минусовки"; position: absolute; left: 50%; bottom: 77px; z-index: 2; padding: 7px 9px; border: 1px solid rgba(0,0,0,.10); border-bottom: 0; border-radius: 9px 9px 0 0; background: #fff; color: #6e6e73; box-shadow: 0 -8px 20px rgba(0,0,0,.10); font-size: 10px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity .12s; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSpeed input[type="range"] { position: absolute; left: 50%; bottom: 28px; z-index: 3; width: 154px !important; min-width: 154px; height: 40px; margin: 0; padding: 9px 12px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.10); border-radius: 0 0 9px 9px; background: #fff; box-shadow: 0 -2px 20px rgba(0,0,0,.10); transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSpeed:hover::before, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSpeed:focus-within::before, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSpeed:hover input[type="range"], body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSpeed:focus-within input[type="range"] { opacity: 1; visibility: visible; pointer-events: auto; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSpeedPresets, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMinusCollapseBtn { display: none !important; } /* Selection actions occupy the right end of the same dock. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbFloatingLoopBar { position: fixed; left: auto; right: 0; bottom: 0; transform: none; width: var(--pbSelectionDockW); max-width: none; height: var(--pbStudentDockH); margin: 0; padding: 9px 14px; box-sizing: border-box; display: none; grid-template-columns: minmax(0, 1fr) 28px; grid-template-rows: 22px 38px; align-items: center; gap: 4px 8px; border: 0; border-top: 1px solid rgba(0,0,0,.10); border-left: 1px solid rgba(0,0,0,.08); border-radius: 0; background: rgba(255,255,255,.98); box-shadow: none; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 300; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbFloatingLoopBar.pb-on { display: grid; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbFloatingLoopText { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #1d1d1f; font-size: 11px; font-weight: 700; white-space: nowrap; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbFloatingPracticeBtn { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 38px; padding: 0 12px; border: 0 !important; border-radius: 6px; background: var(--pbAppleBlue); color: #fff; box-shadow: 0 2px 7px rgba(0,122,255,.22); font-size: 11px; font-weight: 700; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbFloatingClearBtn { grid-column: 2; grid-row: 1; width: 28px; height: 28px; padding: 0 !important; border: 0; border-radius: 6px; background: #f2f2f4; color: #3a3a3c; font-size: 11px; } } /* Визуальная разметка структуры песни: использует существующий #pbSheetScroll и существующие .pbMeasureHit, поэтому выбор ученика и администратора совпадает. */ body.pb-trainer-markup-workspace-open { overflow: hidden !important; } .pbTrainerMarkupWorkspace { position: fixed; z-index: 100080; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #f5f5f7; color: #1d1d1f; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .pbTrainerWorkspaceHeader { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 18px; border-bottom: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.96); box-sizing: border-box; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .pbTrainerWorkspaceHeader span, .pbTrainerWorkspaceHeader h1, .pbTrainerWorkspaceHeader p { display: block; margin: 0; } .pbTrainerWorkspaceHeader span { color: #6e6e73; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .pbTrainerWorkspaceHeader h1 { margin-top: 2px; font-size: clamp(18px, 2vw, 25px); line-height: 1.14; } .pbTrainerWorkspaceHeader p { margin-top: 2px; color: #6e6e73; font-size: 13px; } .pbTrainerWorkspaceHeaderActions { display: flex; align-items: center; gap: 8px; } .pbTrainerWorkspaceHeader button, .pbTrainerWorkspaceToolbar button, .pbTrainerWorkspaceCreate button { min-height: 42px; padding: 8px 13px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; background: #fff; color: #1d1d1f; font: 650 13px/1.2 inherit; cursor: pointer; } .pbTrainerWorkspaceHeader .pbTrainerWorkspaceClose { width: 44px; min-width: 44px; padding: 0; border-radius: 50%; color: #6e6e73; font-size: 26px; font-weight: 400; } .pbTrainerWorkspaceBody { display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr) 350px; } .pbTrainerWorkspaceSheet { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); } .pbTrainerWorkspaceToolbar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px; border-bottom: 1px solid rgba(0,0,0,.08); background: #fff; } .pbTrainerWorkspaceToolbar > div:first-child span, .pbTrainerWorkspaceToolbar > div:first-child strong, .pbTrainerWorkspaceToolbar > div:first-child small { display: block; } .pbTrainerWorkspaceToolbar > div:first-child span { color: #6e6e73; font-size: 11px; } .pbTrainerWorkspaceToolbar > div:first-child strong { margin-top: 2px; color: #006bd6; font-size: 16px; } .pbTrainerWorkspaceToolbar > div:first-child small { margin-top: 2px; color: #86868b; font-size: 11px; } .pbTrainerWorkspaceNav { display: flex; align-items: flex-end; gap: 6px; } .pbTrainerWorkspaceNav label span { display: block; margin-bottom: 3px; color: #6e6e73; font-size: 10px; } .pbTrainerWorkspaceNav input { width: 94px; min-height: 42px; padding: 7px 9px; border: 1px solid #c7c7cc; border-radius: 9px; background: #fff; color: #1d1d1f; box-sizing: border-box; font-size: 16px; } .pbTrainerWorkspaceNav #pbTrainerWorkspacePrevious, .pbTrainerWorkspaceNav #pbTrainerWorkspaceNext { width: 42px; padding: 0; font-size: 18px; } .pbTrainerWorkspaceSheetMount { min-width: 0; min-height: 0; overflow: hidden; padding: 12px; box-sizing: border-box; } .pbTrainerMarkupWorkspace #pbSheetScroll { width: 100% !important; height: 100% !important; max-height: none !important; margin: 0 !important; border: 1px solid rgba(0,0,0,.10) !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 8px 30px rgba(0,0,0,.07) !important; box-sizing: border-box !important; overflow: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .pbTrainerMarkupWorkspace #pbSongSheet { min-width: 0; } .pbTrainerWorkspaceSidebar { min-width: 0; min-height: 0; overflow: auto; padding: 13px; border-left: 1px solid rgba(0,0,0,.10); background: #fff; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .pbTrainerWorkspaceHint { padding: 12px; border: 1px solid rgba(0,122,255,.17); border-radius: 11px; background: rgba(0,122,255,.055); } .pbTrainerWorkspaceHint strong, .pbTrainerWorkspaceHint span { display: block; } .pbTrainerWorkspaceHint strong { font-size: 14px; } .pbTrainerWorkspaceHint span { margin-top: 4px; color: #6e6e73; font-size: 12px; line-height: 1.42; } .pbTrainerWorkspaceCreate { display: grid; gap: 7px; margin: 10px 0 14px; } .pbTrainerWorkspaceCreate button { border-color: #007aff; background: #007aff; color: #fff; } .pbTrainerWorkspaceCreate button:disabled { opacity: .45; cursor: default; } .pbTrainerWorkspaceSidebar > section { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); } .pbTrainerWorkspaceSidebar > section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; } .pbTrainerWorkspaceSidebar > section > header strong { font-size: 14px; } .pbTrainerWorkspaceSidebar > section > header span { min-width: 25px; padding: 3px 7px; border-radius: 999px; background: #eeeef0; color: #6e6e73; text-align: center; font-size: 11px; } .pbTrainerMarkupWorkspace .pbTrainerMarkupRow { margin-top: 6px; } .pbTrainerMarkupWorkspace::after { position: fixed; right: 370px; bottom: 20px; z-index: 3; max-width: min(420px, calc(100vw - 32px)); padding: 11px 14px; border-radius: 11px; background: #1f7a50; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.22); content: attr(data-pb-saved-message); font-size: 13px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; } .pbTrainerMarkupWorkspace[data-pb-saved-message]::after { opacity: 1; transform: none; } body.pb-trainer-markup-workspace-open #pbFloatingLoopBar, body.pb-trainer-markup-workspace-open #pbRangePracticePopover { display: none !important; } .pbTrainerMarkupRangeSummary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid rgba(0,122,255,.17); border-radius: 10px; background: rgba(0,122,255,.055); } .pbTrainerMarkupRangeSummary span { margin: 0 !important; color: #6e6e73 !important; } .pbTrainerMarkupRangeSummary strong { color: #006bd6; font-size: 15px; } .pbTrainerMarkupManual { padding: 0 2px; } .pbTrainerMarkupManual summary { color: #6e6e73; font-size: 12px; cursor: pointer; } .pbTrainerMarkupManual > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } .pbTrainerMarkupDialog .pbTrainerMarkupSaveNext { margin-left: auto; } .pbTrainerSavedPartRegion { fill: none; stroke: none; pointer-events: none !important; } .pbTrainerMarkupWorkspace .pbTrainerSavedPartRegion { fill: #3478c7; fill-opacity: .055; stroke: none; pointer-events: none !important; } .pbTrainerMarkupWorkspace .pbTrainerSavedFillRegion { fill: none; stroke-opacity: .78; stroke-width: 1.8; stroke-dasharray: 5 3; pointer-events: none !important; } .pbTrainerMarkupWorkspace .pbTrainerMeasureMark { pointer-events: none !important; } .pbTrainerMarkupWorkspace .pbTrainerCurrentSelection { fill: #007aff; fill-opacity: .10; stroke: #0068d8; stroke-opacity: .96; stroke-width: 3.2; pointer-events: none !important; } .pbTrainerMarkupWorkspace .pbMeasureNumAtStart { paint-order: stroke; stroke: rgba(255,255,255,.96); stroke-width: 3px; stroke-linejoin: round; } .pbTrainerMarkLabel { paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 3px; stroke-linejoin: round; } body.pb-student-dark .pbTrainerMarkupWorkspace { background: #111113; color: #f5f5f7; } body.pb-student-dark .pbTrainerWorkspaceHeader, body.pb-student-dark .pbTrainerWorkspaceToolbar, body.pb-student-dark .pbTrainerWorkspaceSidebar { border-color: rgba(255,255,255,.10); background: rgba(28,28,30,.97); } body.pb-student-dark .pbTrainerWorkspaceHeader h1, body.pb-student-dark .pbTrainerWorkspaceSidebar strong { color: #f5f5f7; } body.pb-student-dark .pbTrainerWorkspaceHeader p, body.pb-student-dark .pbTrainerWorkspaceHeader span, body.pb-student-dark .pbTrainerWorkspaceHint span { color: #a1a1a6; } body.pb-student-dark .pbTrainerWorkspaceHeader button, body.pb-student-dark .pbTrainerWorkspaceToolbar button, body.pb-student-dark .pbTrainerWorkspaceNav input { border-color: rgba(255,255,255,.14); background: #2c2c2e; color: #f5f5f7; } body.pb-student-dark .pbTrainerWorkspaceCreate button { border-color: #0a84ff; background: #0a84ff; } body.pb-student-dark .pbTrainerWorkspaceSheetMount { background: #111113; } body.pb-student-dark .pbTrainerMarkupWorkspace #pbSheetScroll { border-color: rgba(255,255,255,.12) !important; background: #f7f7f8 !important; } body.pb-student-dark .pbTrainerWorkspaceHint { border-color: rgba(100,210,255,.20); background: rgba(10,132,255,.12); } body.pb-student-dark .pbTrainerWorkspaceSidebar > section { border-color: rgba(255,255,255,.09); } body.pb-student-dark .pbTrainerWorkspaceSidebar > section > header span { background: #3a3a3c; color: #d1d1d6; } body.pb-student-dark .pbTrainerMarkupRangeSummary { border-color: rgba(100,210,255,.20); background: rgba(10,132,255,.12); } body.pb-student-dark .pbTrainerMarkupRangeSummary span { color: #a1a1a6 !important; } body.pb-student-dark .pbTrainerMarkupRangeSummary strong { color: #64d2ff; } body.pb-student-dark .pbTrainerMarkLabel { stroke: rgba(247,247,248,.94); } body.pb-student-dark .pbTrainerMarkupWorkspace .pbTrainerSavedPartRegion { fill-opacity: .09; } body.pb-student-dark .pbTrainerMarkupWorkspace .pbTrainerCurrentSelection { fill-opacity: .14; stroke: #64d2ff; stroke-opacity: 1; } @media (max-width: 820px) { .pbTrainerMarkupWorkspace { padding-bottom: env(safe-area-inset-bottom, 0px); } .pbTrainerWorkspaceHeader { min-height: 62px; padding: 8px 10px; } .pbTrainerWorkspaceHeaderActions #pbTrainerWorkspacePreview { width: 44px; padding: 0; overflow: hidden; color: transparent; font-size: 0; } .pbTrainerWorkspaceHeaderActions #pbTrainerWorkspacePreview i { color: #1d1d1f; font-size: 18px; } body.pb-student-dark .pbTrainerWorkspaceHeaderActions #pbTrainerWorkspacePreview i { color: #f5f5f7; } .pbTrainerWorkspaceBody { display: block; overflow: auto; } .pbTrainerWorkspaceSheet { height: 58dvh; min-height: 410px; } .pbTrainerWorkspaceToolbar { align-items: flex-start; flex-direction: column; gap: 8px; padding: 8px 10px; } .pbTrainerWorkspaceNav { width: 100%; align-items: flex-end; } .pbTrainerWorkspaceNav label { flex: 1; } .pbTrainerWorkspaceNav input { width: 100%; } .pbTrainerWorkspaceNav #pbTrainerWorkspaceJumpGo { flex: 0 0 auto; } .pbTrainerWorkspaceSheetMount { padding: 7px; } .pbTrainerWorkspaceSidebar { min-height: 42dvh; padding: 12px 10px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(0,0,0,.10); border-left: 0; } .pbTrainerWorkspaceCreate { grid-template-columns: 1fr; } .pbTrainerMarkupWorkspace::after { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 14px; } .pbTrainerMarkupManual > div { grid-template-columns: 1fr; } .pbTrainerMarkupRangeSummary { align-items: flex-start; flex-direction: column; gap: 4px; } .pbTrainerMarkupDialog footer { flex-wrap: wrap; } .pbTrainerMarkupDialog .pbTrainerMarkupSaveNext { width: 100%; margin-left: 0; order: 3; } } /* ============================================================================ АДМИН-РЕДАКТОР · ЭТАПЫ 3–6 — САМОСТОЯТЕЛЬНЫЕ РАБОЧИЕ ЭКРАНЫ Mobile First: на телефоне это обычная прокручиваемая страница между транспортом и нижней навигацией; с 900px тот же компонент получает больше воздуха. ============================================================================ */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbAdminSectionIntro, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbAdminStandaloneIntro { display: block; padding: 20px 18px 16px; border-bottom: 1px solid rgba(0,0,0,.07); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbAdminSectionEyebrow { margin-bottom: 5px; color: var(--accent); font: 700 10px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbAdminSectionIntro h2, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbAdminStandaloneIntro h2 { margin: 0; color: #1d1d1f; font: 750 24px/1.14 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbAdminSectionIntro p, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbAdminStandaloneIntro p { max-width: 620px; margin: 6px 0 0; color: #6e6e73; font: 500 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; } /* В самостоятельных разделах нотный лист не занимает место за рабочей формой. */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #RightHandContent, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #RightHandContent, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #RightHandContent, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #RightHandContent { padding-right: 0 !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbAdminNotesHead, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbLeftPanel, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbLegendBanner, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbSheetScroll, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbMobileSheet, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbAdminNotesHead, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbLeftPanel, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbLegendBanner, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbSheetScroll, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbMobileSheet, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbAdminNotesHead, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbLeftPanel, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbLegendBanner, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbAdminNotesHead, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbLegendBanner, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbStudentMinus, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbStudentMinus, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbStudentMinus, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbStudentMinus { display: none !important; } /* Аудио, Отработка и Правка используют один и тот же контейнер как основную карточку. */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar { display: block !important; position: relative !important; inset: auto !important; width: min(760px, calc(100% - 24px)) !important; height: auto !important; max-height: none !important; margin: 14px auto calc(var(--pb-admin-nav-h) + 28px) !important; overflow: visible !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 16px !important; background: #fff; box-shadow: 0 8px 26px rgba(0,0,0,.06) !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar .pbInsp, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar .pbTbHint, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar .pbInsp, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar .pbTbHint, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar .pbInsp, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar .pbTbHint { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar .pbInspMinus, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar .pbInspPractice, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar .pbInspGame, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar .pbInspEditor { display: flex !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar .pbInspMinus, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar .pbInspPractice, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar .pbInspGame, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar .pbInspEditor { padding: 0 18px 20px; border: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAdminSectionIntro { margin: 0 -18px 4px; } /* Этап 3 · Аудио. */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackCard { position: relative; display: grid; grid-template-columns: minmax(110px, 1fr) auto auto auto; align-items: center; gap: 7px; padding: 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #fafafa; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackState { grid-column: 1; color: #86868b; font-size: 11px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackReady .pbAudioTrackState { color: #248a3d; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackState::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #c7c7cc; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackReady .pbAudioTrackState::before { background: #34c759; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackUploading .pbAudioTrackState { color: var(--accent); font-weight: 600; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackUploading .pbAudioTrackState::before { background: var(--accent); animation: pbAudioUploadPulse .8s ease-in-out infinite alternate; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar button.pbAudioUploading { min-width: 132px; cursor: wait; opacity: .82; } @keyframes pbAudioUploadPulse { from { transform: scale(.75); opacity: .45; } to { transform: scale(1.2); opacity: 1; } } .pbBackingUploadNotice { position: fixed; left: 50%; bottom: 28px; z-index: 100050; max-width: min(520px, calc(100vw - 28px)); padding: 12px 18px; border-radius: 12px; color: #fff; background: rgba(35,35,37,.96); box-shadow: 0 10px 32px rgba(0,0,0,.28); font: 600 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 12px); transition: opacity .18s ease, transform .18s ease; } .pbBackingUploadNotice.pbNoticeVisible { opacity: 1; transform: translate(-50%, 0); } .pbBackingUploadNotice.pbNoticeSuccess { background: rgba(31,122,61,.97); } .pbBackingUploadNotice.pbNoticeError { background: rgba(181,48,48,.97); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackCard > button { width: auto !important; min-height: 42px; padding: 9px 13px; text-align: center; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackCard > .pbAudioUploadBtn { background: var(--accent); color: #fff; border-color: var(--accent); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioMore { position: relative; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioMore summary { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,.10); border-radius: 9px; background: #fff; color: #6e6e73; cursor: pointer; list-style: none; font-weight: 800; letter-spacing: 1px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioMore summary::-webkit-details-marker { display: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioMoreMenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 190px; padding: 6px; border: 1px solid rgba(0,0,0,.10); border-radius: 11px; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.16); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioMoreMenu .pbAudioDeleteBtn { display: block !important; width: 100% !important; min-height: 42px; color: #d70015; text-align: left; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioYoutubeCard { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioYoutubeCard > div { flex: 1; min-width: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioYoutubeCard strong, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioYoutubeCard span { display: block; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioYoutubeCard span { margin-top: 3px; color: #86868b; font-size: 11px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioYoutubeCard > button { width: auto !important; min-height: 42px; } /* Этап 4 · Калибровка. */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbToolbar { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbLeftPanel { display: block !important; width: min(980px, calc(100% - 24px)) !important; max-width: none !important; margin: 14px auto calc(var(--pb-admin-nav-h) + 28px) !important; padding: 0 !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbSheetScroll { display: block !important; width: min(1180px, calc(100% - 24px)); margin: 0 auto calc(var(--pb-admin-nav-h) + 32px); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbSheetScroll { display: block !important; width: min(1180px, calc(100% - 24px)); margin: 0 auto calc(var(--pb-admin-nav-h) + 32px); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbLeftPanel .pbAdminStandaloneIntro { padding-left: 2px; border: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbLeftPanel #pbBackingWaveWrap { margin-top: 0 !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibPill.pbCalibWarn, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibFoot.pbCalibWarn { color: #b25000 !important; background: #fff1dc !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibAdvanced { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding: 16px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: #fff; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibAdvancedHead, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibKeys { grid-column: 1 / -1; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibAdvancedHead strong, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibAdvancedHead span { display: block; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibAdvancedHead span { margin-top: 3px; color: #86868b; font-size: 12px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibAdvanced .pbInspRow { display: contents; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibAdvanced button { min-height: 44px; padding: 9px 12px; border: 1px solid rgba(0,0,0,.10); border-radius: 9px; background: #fff; color: #1d1d1f; font: 600 13px/1.2 -apple-system, system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibAdvanced .pbCalibDanger { color: #d70015; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibKeys { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding-top: 4px; color: #6e6e73; font-size: 11px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibKeys kbd { padding: 3px 6px; border: 1px solid rgba(0,0,0,.12); border-bottom-width: 2px; border-radius: 5px; background: #f5f5f7; color: #1d1d1f; font: 700 10px/1 -apple-system, system-ui, sans-serif; } /* Калибровка · структурная разметка частей и сбивок для Цифрового тренера. */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupCard { margin-top: 12px; padding: 16px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: #fff; color: #1d1d1f; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead > div { min-width: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead span, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead strong, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead small { display: block; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead span { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead strong { margin-top: 3px; font-size: 18px; line-height: 1.2; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead small { max-width: 580px; margin-top: 5px; color: #6e6e73; font-size: 12px; line-height: 1.42; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead button, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupCreate button, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRow button { min-height: 44px; border: 1px solid rgba(0,0,0,.10); border-radius: 9px; background: #fff; color: #1d1d1f; font: 650 13px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead button { flex: 0 0 auto; padding: 9px 13px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupSelection { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 11px 12px; border-radius: 10px; background: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupSelection span { color: #6e6e73; font-size: 12px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupSelection strong { color: #1d1d1f; font-size: 13px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupCreate { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(180px, auto); gap: 10px; margin-top: 10px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupKinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 11px; background: #f2f2f4; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupKinds button { min-height: 40px; border: 0; background: transparent; color: #6e6e73; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupKinds button.pbTrainerMarkupKindActive { background: #fff; color: #1d1d1f; box-shadow: 0 1px 5px rgba(0,0,0,.10); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupCreate .pbTrainerMarkupPrimary { padding: 9px 15px; border-color: var(--accent); background: var(--accent); color: #fff; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupCreate .pbTrainerMarkupPrimary:disabled { border-color: #d2d2d7; background: #e5e5ea; color: #8e8e93; cursor: default; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupInvalid { margin-top: 10px; padding: 9px 11px; border: 1px solid #f2c66d; border-radius: 9px; background: #fff7e6; color: #8a4d00; font-size: 12px; line-height: 1.4; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupGroups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupGroups > section { min-width: 0; padding: 12px; border: 1px solid rgba(0,0,0,.07); border-radius: 11px; background: #fafafa; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupGroupHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupGroupHead strong { font-size: 14px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupGroupHead span { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: #e8e8ed; color: #6e6e73; font-size: 11px; font-weight: 700; text-align: center; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupList { display: grid; gap: 7px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupEmpty { margin: 5px 0; color: #86868b; font-size: 12px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRow { overflow: hidden; border: 1px solid rgba(0,0,0,.08); border-left: 4px solid #3478c7; border-radius: 9px; background: #fff; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRow-fill.pbTrainerDifficulty-simple { border-left-color: #2f8f63; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRow-fill.pbTrainerDifficulty-medium { border-left-color: #c47b00; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRow-fill.pbTrainerDifficulty-complex { border-left-color: #d35432; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRow-fill.pbTrainerDifficulty-key { border-left-color: #a83b8e; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRow .pbTrainerMarkupJump { display: block; width: 100%; min-height: 0; padding: 10px; border: 0; border-radius: 0; background: transparent; text-align: left; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupJump strong, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupJump span { display: block; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupJump strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupJump span { margin-top: 3px; color: #74747a; font-size: 11px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRowActions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(0,0,0,.06); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRowActions button { min-height: 38px; border: 0; border-radius: 0; background: transparent; color: var(--accent); font-size: 11px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRowActions button + button { border-left: 1px solid rgba(0,0,0,.06); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRowActions .pbTrainerMarkupDelete { color: #d70015; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead button:hover, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRow button:hover { background: #f2f2f4; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupCreate .pbTrainerMarkupPrimary:hover { background: #006ee6; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupCard button:focus-visible, .pbTrainerMarkupModal button:focus-visible, .pbTrainerMarkupModal input:focus-visible, .pbTrainerMarkupModal select:focus-visible, .pbTrainerMarkupModal textarea:focus-visible { outline: 3px solid rgba(0,122,255,.28); outline-offset: 2px; } body.pb-trainer-markup-modal-open { overflow: hidden !important; } .pbTrainerMarkupModal { position: fixed; inset: 0; z-index: 100120; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(12,16,24,.48); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; } .pbTrainerMarkupDialog { width: min(760px, 100%); max-height: min(900px, calc(100dvh - 36px)); overflow: hidden; border: 1px solid rgba(0,0,0,.13); border-radius: 17px; background: #fff; color: #1d1d1f; box-shadow: 0 24px 80px rgba(0,0,0,.32); } .pbTrainerMarkupDialog form { display: grid; max-height: inherit; grid-template-rows: auto minmax(0, 1fr) auto; } .pbTrainerMarkupDialog header, .pbTrainerMarkupDialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; } .pbTrainerMarkupDialog header { border-bottom: 1px solid rgba(0,0,0,.08); } .pbTrainerMarkupDialog footer { justify-content: flex-end; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(0,0,0,.08); } .pbTrainerMarkupDialog header span { display: block; color: var(--accent, #007aff); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; } .pbTrainerMarkupDialog header h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.2; } .pbTrainerMarkupDialog button { min-height: 44px; padding: 9px 16px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; background: #fff; color: #1d1d1f; font: 650 14px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; cursor: pointer; } .pbTrainerMarkupDialog .pbTrainerMarkupClose { width: 44px; min-width: 44px; padding: 0; border-radius: 50%; color: #6e6e73; font-size: 24px; font-weight: 400; } .pbTrainerMarkupDialog .pbTrainerMarkupSaveNext { border-color: var(--accent, #007aff); background: var(--accent, #007aff); color: #fff; } .pbTrainerMarkupFormBody { overflow: auto; padding: 15px 16px 18px; -webkit-overflow-scrolling: touch; } .pbTrainerMarkupId { overflow: hidden; margin-bottom: 12px; color: #86868b; font: 500 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; } .pbTrainerMarkupFormGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pbTrainerMarkupFormGrid > label, .pbTrainerMarkupFormGrid > .pbTrainerMarkupChecks { display: block; min-width: 0; } .pbTrainerMarkupFormGrid label > span { display: block; margin-bottom: 5px; color: #48484a; font-size: 12px; font-weight: 650; } .pbTrainerMarkupFormGrid input[type="text"], .pbTrainerMarkupFormGrid input[type="number"], .pbTrainerMarkupFormGrid select, .pbTrainerMarkupFormGrid textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #c7c7cc; border-radius: 9px; background: #fff; color: #1d1d1f; font: 400 15px/1.35 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } .pbTrainerMarkupFormGrid textarea { min-height: 84px; resize: vertical; } .pbTrainerMarkupWide { grid-column: 1 / -1; } .pbTrainerMarkupChecks { display: flex !important; align-items: center; gap: 9px 16px; flex-wrap: wrap; padding-top: 22px; } .pbTrainerMarkupChecks label { display: flex; align-items: center; gap: 7px; min-height: 34px; cursor: pointer; } .pbTrainerMarkupChecks label > span { margin: 0; } .pbTrainerMarkupChecks input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent, #007aff); } .pbTrainerMarkupContent { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; min-width: 0; margin: 0; padding: 10px 12px 12px; border: 1px solid #c7c7cc; border-radius: 9px; } .pbTrainerMarkupContent legend { padding: 0 5px; color: #48484a; font-size: 12px; font-weight: 650; } .pbTrainerMarkupContent label { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; cursor: pointer; } .pbTrainerMarkupContent label > span { margin: 0; } .pbTrainerMarkupContent input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent, #007aff); } .pbTrainerMarkupPreview { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 14px; padding: 12px; border: 1px solid rgba(0,122,255,.16); border-radius: 10px; background: rgba(0,122,255,.055); font-size: 12px; } .pbTrainerMarkupPreview strong { grid-column: 1 / -1; } .pbTrainerMarkupPreview span { color: #4a4a4f; } .pbTrainerMarkupKeyHint, .pbTrainerMarkupContextWarning, .pbTrainerMarkupOverlap, .pbTrainerMarkupFormError { margin-top: 10px; padding: 9px 11px; border-radius: 9px; font-size: 12px; line-height: 1.42; } .pbTrainerMarkupKeyHint { border: 1px solid rgba(168,59,142,.25); background: rgba(168,59,142,.08); color: #852f71; } .pbTrainerMarkupContextWarning { border: 1px solid rgba(215,0,21,.24); background: rgba(215,0,21,.07); color: #b00014; } .pbTrainerMarkupOverlap { border: 1px solid #f2c66d; background: #fff7e6; color: #8a4d00; } .pbTrainerMarkupFormError { border: 1px solid rgba(215,0,21,.24); background: rgba(215,0,21,.07); color: #b00014; } .pbTrainerDeleteDialog { width: min(500px, 100%); } .pbTrainerDeleteDialog > div { display: grid; max-height: inherit; grid-template-rows: auto minmax(0, 1fr) auto; } .pbTrainerDeleteBody { overflow: auto; padding: 22px 18px 24px; -webkit-overflow-scrolling: touch; } .pbTrainerDeleteBody strong { display: block; margin-bottom: 8px; font-size: 17px; line-height: 1.3; } .pbTrainerDeleteBody p { margin: 0; color: #4a4a4f; font-size: 14px; line-height: 1.5; } .pbTrainerMarkupDialog .pbTrainerMarkupDeleteConfirm { border-color: #d70015; background: #d70015; color: #fff; } .pbTrainerMarkupModal [hidden], .pbTrainerMarkupCard [hidden] { display: none !important; } /* Этап 5 · Отработка. */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeCard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, auto); gap: 14px; padding: 14px; border: 1px solid rgba(0,113,227,.16); border-radius: 13px; background: #f5f9ff; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeCopy span, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeCopy strong, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeCopy small { display: block; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeCopy span { color: #6e6e73; font-size: 11px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeCopy strong { margin-top: 3px; font-size: 17px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeCopy strong.pbRangeSelected { color: var(--accent); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeCopy small { margin-top: 5px; color: #86868b; line-height: 1.35; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeActions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeActions button { min-height: 44px; text-align: center; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar #pbAdminPracticeNotes { grid-column: 1 / -1; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar #pbAdminPracticeSelected, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar #pbAdminPracticeWhole { background: #287a54; border-color: #287a54; color: #fff; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAdminStudentPreview { display: flex; min-height: 58px; align-items: center; gap: 11px; padding: 11px 13px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.09); border-radius: 11px; color: #1d1d1f; text-decoration: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAdminStudentPreview > span { flex: 1; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAdminStudentPreview strong, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAdminStudentPreview small { display: block; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAdminStudentPreview small { margin-top: 3px; color: #86868b; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeGameCard { margin-top: 0; border-top: 1px solid rgba(0,0,0,.07); } /* Этап 6 · Правка. */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbEditGroup { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 13px; background: #fafafa; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbEditGroupHead strong, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbEditGroupHead span { display: block; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbEditGroupHead span { margin-top: 3px; color: #86868b; font-size: 11px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbEditMeasures #pbAdminEditMode, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbEditMeasures #pbAdminEditActions { background: var(--accent); border-color: var(--accent); color: #fff; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbEditExport { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbEditExport button { text-align: center; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbEditRareHint { display: flex; gap: 10px; padding: 12px 4px 0; color: #6e6e73; font-size: 12px; line-height: 1.4; } /* Тёмная тема новых экранов. */ body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbAdminSectionIntro, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbAdminStandaloneIntro, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbPracticeGameCard { border-color: rgba(255,255,255,.09) !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbAdminSectionIntro h2, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbAdminStandaloneIntro h2, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbAudioYoutubeCard strong, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbPracticeRangeCopy strong, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbEditGroupHead strong, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbCalibAdvancedHead strong { color: #f5f5f7 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbAudioTrackCard, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbAudioYoutubeCard, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbPracticeRangeCard, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbEditGroup, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbCalibAdvanced, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupCard { border-color: rgba(255,255,255,.10) !important; background: #242426 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbAudioMore summary, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbAudioMoreMenu, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbCalibAdvanced button, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbCalibKeys kbd { border-color: rgba(255,255,255,.12) !important; background: #2c2c2e !important; color: #f5f5f7 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead strong, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupSelection strong, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupGroupHead strong, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupJump strong { color: #f5f5f7 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead small, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupSelection span, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupJump span, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupEmpty { color: #a1a1a6 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupSelection, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupKinds, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupGroups > section { border-color: rgba(255,255,255,.09) !important; background: #1c1c1e !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead button, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupKinds button.pbTrainerMarkupKindActive, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRow { border-color: rgba(255,255,255,.11); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupKinds button { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRowActions, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupRowActions button + button { border-color: rgba(255,255,255,.08); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupGroupHead span { background: #3a3a3c; color: #d1d1d6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupInvalid { border-color: rgba(255,188,70,.35); background: rgba(120,74,0,.24); color: #ffd08a; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupDialog { border-color: rgba(255,255,255,.12); background: #242426; color: #f5f5f7; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupDialog header, body.pb-song-mode.pb-student-dark .pbTrainerMarkupDialog footer { border-color: rgba(255,255,255,.09); } body.pb-song-mode.pb-student-dark .pbTrainerMarkupDialog button, body.pb-song-mode.pb-student-dark .pbTrainerMarkupFormGrid input[type="text"], body.pb-song-mode.pb-student-dark .pbTrainerMarkupFormGrid input[type="number"], body.pb-song-mode.pb-student-dark .pbTrainerMarkupFormGrid select, body.pb-song-mode.pb-student-dark .pbTrainerMarkupFormGrid textarea { border-color: rgba(255,255,255,.14); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupDialog .pbTrainerMarkupSaveNext { border-color: #0a84ff; background: #0a84ff; color: #fff; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupFormGrid label > span, body.pb-song-mode.pb-student-dark .pbTrainerMarkupPreview span { color: #d1d1d6; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupContent { border-color: rgba(255,255,255,.14); background: #2c2c2e; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupContent legend { color: #d1d1d6; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupId { color: #a1a1a6; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupPreview { border-color: rgba(100,210,255,.20); background: rgba(10,132,255,.12); } body.pb-song-mode.pb-student-dark .pbTrainerMarkupKeyHint { border-color: rgba(255,100,210,.28); background: rgba(168,59,142,.17); color: #ff9bdc; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupContextWarning { border-color: rgba(255,69,58,.35); background: rgba(215,0,21,.16); color: #ff9b95; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupOverlap { border-color: rgba(255,188,70,.35); background: rgba(120,74,0,.24); color: #ffd08a; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupFormError { border-color: rgba(255,69,58,.35); background: rgba(215,0,21,.16); color: #ff9b95; } body.pb-song-mode.pb-student-dark .pbTrainerDeleteBody p { color: #d1d1d6; } body.pb-song-mode.pb-student-dark .pbTrainerMarkupDialog .pbTrainerMarkupDeleteConfirm { border-color: #ff453a; background: #d70015; color: #fff; } @media (max-width: 640px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #RightHandContent, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #RightHandContent, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #RightHandContent, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #RightHandContent { padding-bottom: calc(var(--pb-admin-nav-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar { width: 100% !important; margin: 0 !important; border-width: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbLeftPanel { width: 100% !important; margin: 0 !important; padding: 0 10px 18px !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAdminSectionIntro { padding-top: 18px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackCard { grid-template-columns: minmax(0, 1fr) auto auto; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackCard .pbAudioKindLbl, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackCard .pbAudioTrackState { grid-column: 1 / -1; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbAudioTrackCard > button { width: 100% !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeCard { grid-template-columns: 1fr; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbPracticeRangeActions { grid-template-columns: 1fr; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar #pbAdminPracticeNotes { grid-column: auto; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbEditExport { grid-template-columns: 1fr; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibAdvanced { grid-template-columns: 1fr; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibAdvancedHead, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibKeys { grid-column: 1; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbCalibKeys { align-items: flex-start; flex-direction: column; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupCard { padding: 14px 12px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead { display: grid; grid-template-columns: 1fr; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupHead button { width: 100%; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupCreate, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupGroups { grid-template-columns: 1fr; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbTrainerMarkupSelection { align-items: flex-start; flex-direction: column; gap: 4px; } .pbTrainerMarkupModal { align-items: flex-end; padding: 0; } .pbTrainerMarkupDialog { width: 100%; max-height: 94dvh; border-width: 1px 0 0; border-radius: 18px 18px 0 0; } .pbTrainerMarkupDialog header h2 { font-size: 18px; } .pbTrainerMarkupFormGrid { grid-template-columns: 1fr; } .pbTrainerMarkupWide { grid-column: 1; } .pbTrainerMarkupPreview { grid-template-columns: 1fr; } .pbTrainerMarkupPreview strong { grid-column: 1; } .pbTrainerMarkupChecks { padding-top: 0; } .pbTrainerMarkupFormGrid input[type="text"], .pbTrainerMarkupFormGrid input[type="number"], .pbTrainerMarkupFormGrid select, .pbTrainerMarkupFormGrid textarea { font-size: 16px; } .pbTrainerMarkupDialog footer button { flex: 1; } } @media (min-width: 900px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbLeftPanel { margin-top: 22px !important; margin-bottom: 32px !important; } } @media (min-width: 900px) and (max-width: 1050px) { body.pb-song-mode.pb-skin-light:not(.pb-admin) { --pbSelectionDockW: 280px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus { gap: 9px; padding-left: 12px; padding-right: 12px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuMeta { flex-basis: 92px; width: 92px; max-width: 92px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuModeGroup { flex-basis: 176px; width: 176px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentMinus .pbStuSeekWrap { min-width: 96px; } } /* ===== Тема интерфейса: общий переключатель и нейтральная dark-палитра ===== */ #pbStudentThemeSwitch { display: none; } body.pb-song-mode.pb-skin-light #pbStudentThemeSwitch { position: fixed; left: 10px; top: 9px; z-index: 232; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.pb-song-mode.pb-skin-light #pbStudentThemeSwitch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } body.pb-song-mode.pb-skin-light #pbStudentThemeSwitch .pbThemeTrack { position: relative; width: 38px; height: 22px; flex: none; border: 1px solid rgba(0,0,0,.12); border-radius: 11px; background: #d1d1d6; box-sizing: border-box; transition: background-color .18s ease, border-color .18s ease; } body.pb-song-mode.pb-skin-light #pbStudentThemeSwitch .pbThemeThumb { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .18s ease; } body.pb-song-mode.pb-skin-light #pbStudentThemeSwitch input:checked + .pbThemeTrack { border-color: #007aff; background: #007aff; } body.pb-song-mode.pb-skin-light #pbStudentThemeSwitch input:checked + .pbThemeTrack .pbThemeThumb { transform: translateX(16px); } body.pb-song-mode.pb-skin-light #pbStudentThemeSwitch input:focus-visible + .pbThemeTrack { outline: 3px solid rgba(0,122,255,.28); outline-offset: 2px; } body.pb-song-mode.pb-skin-light #pbStudentThemeSwitch .pbThemeLabel { display: none; } body.pb-song-mode.pb-skin-light.pb-admin #pbStudentThemeSwitch { position: static; left: auto; top: auto; z-index: auto; width: 48px; height: 34px; padding: 0 6px; flex: 0 0 48px; border: 1px solid rgba(0,0,0,.10); border-radius: 9px; background: #fff; } body.pb-song-mode.pb-skin-light.pb-admin #pbStudentThemeSwitch:hover { background: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-admin #pbStudentThemeSwitch .pbThemeTrack { width: 34px; height: 20px; border-radius: 10px; } body.pb-song-mode.pb-skin-light.pb-admin #pbStudentThemeSwitch .pbThemeThumb { width: 14px; height: 14px; } body.pb-song-mode.pb-skin-light.pb-admin #pbStudentThemeSwitch input:checked + .pbThemeTrack .pbThemeThumb { transform: translateX(14px); } @media (max-width: 640px) { body.pb-song-mode.pb-skin-light.pb-admin #pbStudentThemeSwitch { position: fixed; left: 10px; top: 9px; z-index: 232; width: 40px; height: 40px; padding: 0; flex-basis: 40px; border: 0; background: transparent; } } @media (min-width: 900px) { body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch { left: 6px; top: auto; bottom: calc(var(--pbStudentDockH) + 9px); width: 100px; height: 50px; flex-direction: column; gap: 4px; border-radius: 6px; color: #5f6368; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch:hover { background: #f1f1f3; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch .pbThemeTrack { width: 42px; height: 24px; border-radius: 12px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch .pbThemeThumb { width: 18px; height: 18px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch input:checked + .pbThemeTrack .pbThemeThumb { transform: translateX(18px); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch .pbThemeLabel { display: block; font: 500 10px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } } @media (min-width: 641px) and (max-width: 899px) { body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch { left: auto; top: auto; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); width: 78px; height: 38px; gap: 6px; border: 1px solid rgba(0,0,0,.10); border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(0,0,0,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-selection-active #pbStudentThemeSwitch { bottom: calc(142px + env(safe-area-inset-bottom)); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch .pbThemeLabel { display: block; color: #5f6368; font: 600 10px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentThemeSwitch { border-color: rgba(255,255,255,.12); background: rgba(44,44,46,.94); box-shadow: 0 3px 14px rgba(0,0,0,.32); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentThemeSwitch .pbThemeLabel { color: #d1d1d6; } } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) { color-scheme: dark; background: #0d0d0f !important; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #GrooveWriter, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #TopNav, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools { background: #151517 !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbBrandLogo { filter: invert(1) hue-rotate(180deg); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbLightTitle { background: rgba(21,21,23,.98); border-color: rgba(255,255,255,.10); color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbLightTitle:hover { background: #1c1c1e; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbLightTitleMain, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbLightTitleText, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools .pbSongZoom button { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbLightTitle::after, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools .pbSongZoom, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentSheetActions button { border-color: rgba(255,255,255,.11); background: rgba(44,44,46,.94); color: #f5f5f7; box-shadow: 0 1px 2px rgba(0,0,0,.24); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbLightTitleMeta, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools #pbZoomLabelTop, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools .pbSongTool { color: #a1a1a6 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools .pbSongTool:hover, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentThemeSwitch:hover, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentSheetActions button:hover { background: #2c2c2e !important; color: #f5f5f7 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools #pbStudentRailCurrent { background: rgba(255,159,10,.13) !important; color: #ff9f0a !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools #pbStudentRailCurrent::before { background: #ff9f0a; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools #pbWholeSongPracticeTop { color: #64d2ff !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools #pbWholeSongPracticeTop:hover, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin).pb-practice-whole-song #pbSongTools #pbWholeSongPracticeTop { background: rgba(100,210,255,.16) !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentThemeSwitch { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentThemeSwitch .pbThemeTrack { border-color: rgba(255,255,255,.16); background: #48484a; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentThemeSwitch input:checked + .pbThemeTrack { border-color: #0a84ff; background: #0a84ff; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #RightHandContent { background: #0d0d0f !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSheetScroll { background: #111114; border-color: rgba(255,255,255,.10); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongSheet, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongSheet > div[id^="osmdCanvasPage"] { background: #111114 !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 1px 4px rgba(0,0,0,.32) !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongSheet svg, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileRowSvg { background: transparent !important; filter: invert(1) hue-rotate(180deg) brightness(1.04) contrast(.96); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSheetScroll::-webkit-scrollbar, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #RightHandContent::-webkit-scrollbar { width: 10px; height: 10px; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSheetScroll::-webkit-scrollbar-track, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #RightHandContent::-webkit-scrollbar-track { background: #111114; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSheetScroll::-webkit-scrollbar-thumb, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #RightHandContent::-webkit-scrollbar-thumb { border: 2px solid #111114; border-radius: 5px; background: #48484a; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbFloatingLoopBar { border-color: rgba(255,255,255,.11); background: rgba(28,28,30,.98); box-shadow: 0 -4px 18px rgba(0,0,0,.20); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuName, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuSpeedLbl, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbFloatingLoopText { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuSub, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuTime, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuTimelineCopy span { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuTimelineCopy b { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuModeGroup { background: #2c2c2e; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuTrackBtn, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuMetronome { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuTrackBtn.pbTrackOn, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuMetronome.pb-on { background: #48484a; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuWaveLayer i { background: #636366; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuWaveActive i { background: #0a84ff; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus #pbStuSeek::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0,0,0,.65); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuSpeed::before, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentMinus .pbStuSpeed input[type="range"] { border-color: rgba(255,255,255,.11); background: #2c2c2e; color: #d1d1d6; box-shadow: 0 -6px 20px rgba(0,0,0,.32); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbFloatingClearBtn { background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin).pb-has-admin #pbLightViewBtn { border: 1px solid rgba(255,255,255,.12); background: #2c2c2e; } @media (max-width: 640px) { body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #TopNav, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #midiPlayer, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #playerControl1, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #playerControlsRow1 { background: rgba(21,21,23,.98) !important; border-color: rgba(255,255,255,.10) !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbNotesTransportTitle, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .tempoTextField { color: #f5f5f7 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbNotesTransportSub { color: #a1a1a6 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobilePanelToggle { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #RightHandContent { background: #0d0d0f !important; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbMobileSheet, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileRows, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileRow, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileSvgWrap, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileRowSvg { background: #111114; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileSheetHead { border-color: rgba(255,255,255,.08); background: rgba(28,28,30,.95); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileSheetTitle span, body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileRowNo { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileSheetTitle small { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileSheetSeg { background: #2c2c2e; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileModeBtn { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileModeBtn.pb-on { background: #48484a; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileRow { border-color: rgba(255,255,255,.06); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileRowTop { border-color: rgba(255,255,255,.08); background: #1c1c1e; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileRowTake { border-color: rgba(10,132,255,.32); background: rgba(10,132,255,.13); color: #64d2ff; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) .pbMobileEmpty { border-color: rgba(255,255,255,.10); background: #1c1c1e; color: #a1a1a6; } } /* Админ использует ту же сохранённую тему, но со своей рабочей компоновкой. */ body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin { color-scheme: dark; background: #0d0d0f !important; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #GrooveWriter, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #TopNav { background: #151517 !important; border-color: rgba(255,255,255,.10) !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbBrandLogo { filter: invert(1) hue-rotate(180deg); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLightTitle { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLightTitle:hover { background: #2c2c2e; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbLightTitleMain, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLightTitleText, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSongTools .pbSongZoom button { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbLightTitleMeta, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSongTools #pbZoomLabelTop { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSongTools .pbSongTool, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSongTools .pbSongZoom, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #upperRight #pbSongClose, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLightViewBtn, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #burgerMenuToggle, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentThemeSwitch { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #d1d1d6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSongTools .pbSongTool:hover, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSongTools .pbSongZoom button:hover, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #upperRight #pbSongClose:hover, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLightViewBtn:hover, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #burgerMenuToggle:hover, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentThemeSwitch:hover { background: #3a3a3c; color: #fff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentThemeSwitch .pbThemeTrack { border-color: rgba(255,255,255,.16); background: #48484a; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentThemeSwitch input:checked + .pbThemeTrack { border-color: #0a84ff; background: #0a84ff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #burgerDropdown { border-color: rgba(255,255,255,.12) !important; background: rgba(28,28,30,.96) !important; box-shadow: 0 14px 38px rgba(0,0,0,.42) !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #burgerDropdown .burger-item, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #burgerDropdown #tapTempoButton, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #burgerDropdown #drumVizToggleTop { color: #f5f5f7 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #burgerDropdown .burger-item:hover, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #burgerDropdown #tapTempoButton:hover, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #burgerDropdown #drumVizToggleTop:hover { background: #3a3a3c !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #midiPlayer, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #playerControl1, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .playerControl, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #playerControlsRow1 { border-color: rgba(255,255,255,.10) !important; background: #1c1c1e !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbNotesTransportTitle, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #MIDIPlayTime1, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .tempoTextField { color: #f5f5f7 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbNotesTransportSub, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .tempoLabel { color: #a1a1a6 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .tempoTextField { border-color: rgba(255,255,255,.12) !important; background: #2c2c2e !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMetTrack { background: #2c2c2e; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMetTrack .metronomeButton { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMetTrack .metronomeButton:hover { background: #3a3a3c; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMetTrack .metronomeButton.buttonSelected, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMetTrack .metronomeButton.buttonSelected:hover { background: #48484a; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.34); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbNotesCollapseBtn { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #RightHandContent, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSheetScroll { background: #0d0d0f !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSongSheet, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSongSheet > div[id^="osmdCanvasPage"] { background: #111114 !important; border-color: rgba(255,255,255,.09) !important; box-shadow: 0 1px 4px rgba(0,0,0,.34) !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSongSheet svg { background: transparent !important; filter: invert(1) hue-rotate(180deg) brightness(1.04) contrast(.96); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLegendBanner { border-color: rgba(255,255,255,.10) !important; background: #1c1c1e !important; color: #f5f5f7; box-shadow: none !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel #pbBackingWaveWrap { border-color: rgba(255,255,255,.10) !important; background: #1c1c1e !important; box-shadow: none; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibTitle { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibSub, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel #pbBackingTime { color: #a1a1a6 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibIcon { background: rgba(10,132,255,.16); color: #64d2ff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibPill { background: rgba(48,209,88,.14); color: #30d158; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibStart, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibStart input, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibPlay, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel #pbCalibDel, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel #pbCalibReset { border-color: rgba(255,255,255,.13); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibPlay { color: #0a84ff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibSrc { background: #2c2c2e; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibSrcBtn { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibSrcBtn.pbCalibSrcOn { background: #48484a; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel #pbBackingWave { border-color: rgba(255,255,255,.10) !important; background: #242426 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel #pbAnchorList { border-color: rgba(255,255,255,.10) !important; background: #1c1c1e !important; color: #d1d1d6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbLeftPanel .pbCalibFoot { color: #30d158; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar { border-color: rgba(255,255,255,.10); background: #1c1c1e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbInspSec, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbInspTop, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbInspFooter, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbTbStatus, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbTbHint { border-color: rgba(255,255,255,.08); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbInspHd, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbTbLabel, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbInspFieldSub, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbTbStatus, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbTbHint, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbFileSub, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbAudioKindLbl { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbInspFieldLbl, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbToolLabel, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbFileName, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar #pbZoomLabel { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar button, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar select, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar input[type="number"] { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar button:hover { background: #3a3a3c; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbSeg { background: #2c2c2e; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbSeg .pbSegBtn { border-color: transparent; background: transparent; color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbSeg .pbSegBtn:hover { background: #3a3a3c; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbSeg .pbSegBtn.pbSegOn, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbSeg .pbSegBtn.pbSegOn:hover { background: #48484a; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar #pbTapStart { border-color: rgba(10,132,255,.24); background: rgba(10,132,255,.14); color: #64d2ff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar #pbBackingPlay { border-color: #0a84ff; background: #2c2c2e; color: #64d2ff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar #pbSongOpenEdit, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar #pbGameBtn { color: #fff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar #pbSongOpenEdit { background: #0a84ff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar #pbGameBtn { background: #30b94f; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar #pbBackingSave, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar #pbBackingHere, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbFileRename { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbDrumNote, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbFileIcon { background: #2c2c2e; color: #d1d1d6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbAudioManageRow > .pbAudioUploadBtn { border-color: rgba(48,209,88,.24); background: rgba(48,209,88,.12); color: #30d158; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbAudioManageRow > .pbAudioDeleteBtn { border-color: rgba(255,69,58,.26); background: rgba(255,69,58,.11); color: #ff6961; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbToolLabel input[type="checkbox"] { background: #48484a; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar .pbToolLabel input[type="checkbox"]:checked { background: #30d158; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMetaModal .pb-songs-box, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMetaModal .pb-meta-box, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMetaModal .pb-songs-head, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMetaModal .pb-meta-body { border-color: rgba(255,255,255,.10); background: #1c1c1e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMetaModal .pb-meta-field > span, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMetaModal .pb-meta-hint { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMetaModal .pb-meta-field input, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMetaModal .pb-meta-field select, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMetaModal .pb-meta-cancel { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMetaModal .pb-songs-head button { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #d1d1d6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbFloatingLoopBar { border-color: rgba(255,255,255,.11); background: rgba(28,28,30,.98); box-shadow: 0 8px 28px rgba(0,0,0,.34); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbFloatingLoopText { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbFloatingClearBtn { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus { border-color: rgba(255,255,255,.11); background: rgba(28,28,30,.98); color: #f5f5f7; box-shadow: 0 -10px 28px rgba(0,0,0,.34); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuBadge { background: #2c2c2e; color: #64d2ff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuLabel { color: #30d158; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuName, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuSpeedLbl { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuSub, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuTime, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuSpeed { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuTrackSeg { background: #2c2c2e; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuTrackBtn, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuMetronome { border-color: rgba(255,255,255,.12); background: transparent; color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuTrackBtn.pbTrackOn, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuMetronome.pb-on { border-color: #48484a; background: #48484a; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuSpeedPreset, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMinusCollapseBtn { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentMinus .pbStuSpeedPreset.pb-on { border-color: #30b94f; background: #30b94f; color: #fff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMeasurePopover { border-color: rgba(255,255,255,.12) !important; background: #1c1c1e !important; color: #f5f5f7 !important; box-shadow: 0 12px 34px rgba(0,0,0,.42) !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMeasurePopover .pbPopTitle, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMeasurePopover .pbPopInline { border-color: rgba(255,255,255,.09); color: #d1d1d6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMeasurePopover button, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMeasurePopover .pbPopInline input { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } @media (max-width: 640px) { body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbStudentThemeSwitch { background: transparent; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbToolbar, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #TopNav, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbSongTools { border-color: rgba(255,255,255,.10) !important; background: #151517 !important; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin #pbMobileSheet, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileRows, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileRow, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileSvgWrap, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileRowSvg { background: #111114; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileRowSvg { filter: invert(1) hue-rotate(180deg) brightness(1.04) contrast(.96); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileSheetHead { border-color: rgba(255,255,255,.08); background: rgba(28,28,30,.95); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileSheetTitle span, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileRowNo { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileSheetTitle small { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileSheetSeg { background: #2c2c2e; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileModeBtn { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileModeBtn.pb-on { background: #48484a; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileRow { border-color: rgba(255,255,255,.06); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileRowTop { border-color: rgba(255,255,255,.08); background: #1c1c1e; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileRowTake { border-color: rgba(10,132,255,.32); background: rgba(10,132,255,.13); color: #64d2ff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin .pbMobileEmpty { border-color: rgba(255,255,255,.10); background: #1c1c1e; color: #a1a1a6; } } /* — плавающее перетаскиваемое окно YouTube (экран 2) — */ #pbFloatYT { position: fixed; left: 0; top: 0; width: 328px; z-index: 1200; border-radius: 13px; overflow: hidden; background: #000; box-shadow: 0 18px 54px rgba(0,0,0,.34), 0 3px 12px rgba(0,0,0,.18); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } #pbFloatYT .pbFloatYTHead { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: #1d1d1f; cursor: grab; touch-action: none; user-select: none; } #pbFloatYT .pbFloatYTHead:active { cursor: grabbing; } #pbFloatYT .pbFloatYTGrip { display: grid; grid-template-columns: repeat(2, 3px); gap: 3px; flex: none; } #pbFloatYT .pbFloatYTGrip i { width: 3px; height: 3px; border-radius: 50%; background: #6e6e73; } #pbFloatYT .pbFloatYTIco { flex: none; width: 20px; height: 20px; border-radius: 5px; background: #ff0000; color: #fff; font-size: 10px; line-height: 20px; text-align: center; } #pbFloatYT .pbFloatYTLbl { flex: 1; min-width: 0; font-size: 12px; color: #d1d1d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pbFloatYT .pbFloatYTClose { flex: none; border: 0; background: transparent; color: #a1a1a6; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; } #pbFloatYT .pbFloatYTClose:hover { color: #fff; } #pbFloatYT .pbFloatYTBody { background: #000; } #pbFloatYT #pbBackingYT { display: block !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #pbFloatYT #pbBackingYT iframe { display: block; width: 100%; border: 0; } /* ===== Плавающее окно барабанной установки (перетаскивается за шапку, размер — уголком) ===== */ body:not(.pb-song-mode) #pbFloatViz { display: none !important; } #pbFloatViz { position: fixed; left: 0; top: 0; width: 360px; z-index: 1200; border-radius: 13px; overflow: hidden; background: #151517; box-shadow: 0 18px 54px rgba(0,0,0,.34), 0 3px 12px rgba(0,0,0,.18); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } #pbFloatViz .pbFloatVizHead { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: #1d1d1f; cursor: grab; touch-action: none; user-select: none; } #pbFloatViz .pbFloatVizHead:active { cursor: grabbing; } #pbFloatViz .pbFloatYTGrip { display: grid; grid-template-columns: repeat(2, 3px); gap: 3px; flex: none; } #pbFloatViz .pbFloatYTGrip i { width: 3px; height: 3px; border-radius: 50%; background: #6e6e73; } #pbFloatViz .pbFloatVizIco { flex: none; font-size: 15px; line-height: 20px; } #pbFloatViz .pbFloatYTLbl { flex: 1; min-width: 0; font-size: 12px; color: #d1d1d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pbFloatViz .pbFloatYTClose { flex: none; border: 0; background: transparent; color: #a1a1a6; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; } #pbFloatViz .pbFloatYTClose:hover { color: #fff; } #pbFloatViz .pbFloatVizBody { background: #151517; padding: 10px 12px 16px; } #pbFloatViz #drumVizSVG { display: block; width: 100%; height: auto; } /* уголок изменения размера (низ-право) */ #pbFloatViz .pbFloatVizResize { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 0 54%, #6e6e73 54% 62%, transparent 62% 72%, #6e6e73 72% 80%, transparent 80%); } /* ===== Frame C · экран «Отработка отрезка» (read-only iframe фрагмента) ===== */ /* Полноэкранный оверлей поверх листа песни. Виден только при body.pb-practice. */ #pbPractice { display: none; } .pb-practice-viz-disabled #pbPracticeViz, .pb-practice-viz-disabled #pbPracVizDock { display: none !important; } body.pb-practice #pbPractice { display: block; position: fixed; inset: 0; z-index: 4000; background: #f5f5f7; overflow: auto; overflow-anchor: none; font-family: -apple-system, system-ui, "Segoe UI", sans-serif; } /* пока открыта отработка — скрыть лист/шапку песни под оверлеем (на всякий случай от прокрутки) */ body.pb-practice { overflow: hidden; } /* ── оверлей «Идёт загрузка…» (спиннер) — над всем, показывается классом .pb-on ── */ #pbLoading { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; background: rgba(245,245,247,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; } #pbLoading.pb-on { display: flex; } #pbLoading .pbLoadingBox { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 30px; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08); } #pbLoading .pbLoadingSpin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(0,0,0,.12); border-top-color: var(--accent, #0071e3); animation: pbSpin .7s linear infinite; } #pbLoading .pbLoadingMsg { font-size: 14px; font-weight: 500; color: #1d1d1f; } @keyframes pbSpin { to { transform: rotate(360deg); } } #pbPractice .pbPracHead { display: flex; align-items: center; gap: 16px; padding: 0 22px; height: 64px; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(0,0,0,.06); position: sticky; top: 0; z-index: 2; } #pbPractice .pbPracBack { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border-radius: 9px; border: 1px solid rgba(0,0,0,.1); background: #fff; font: 500 13px/1 -apple-system, system-ui, sans-serif; color: #1d1d1f; cursor: pointer; } #pbPractice .pbPracBack:hover { background: #f5f5f7; } #pbPractice .pbPracChev { font-size: 17px; line-height: 1; margin-top: -1px; } #pbPractice .pbPracTitle { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.25; } #pbPractice .pbPracTitleMain { font: 600 16px/1.2 -apple-system, system-ui, sans-serif; color: #1d1d1f; } #pbPractice .pbPracTitleMeta { font: 400 11px/1.2 -apple-system, system-ui, sans-serif; color: #86868b; } #pbPractice .pbPracSpacer { width: 104px; flex: 0 0 auto; } #pbPractice .pbPracBody { width: 100%; max-width: none; margin: 0 auto; padding: 22px clamp(16px, 3vw, 44px) 42px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; } #pbPractice .pbPracNote { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; background: #eef3fd; border: 1px solid #dce8fb; border-radius: 8px; padding: 12px 15px; font: 400 13px/1.4 -apple-system, system-ui, sans-serif; color: #2c4a73; } #pbPractice .pbPracEye { font-size: 16px; flex: 0 0 auto; } #pbPractice .pbPracCard { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px rgba(0,0,0,.06); padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 12px; } #pbPractice .pbPracCardHd { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font: 600 12px/1 -apple-system, system-ui, sans-serif; color: #86868b; } #pbPractice .pbPracLock { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-size: 11px; } #pbPractice .pbPracFrameWrap { position: relative; width: 100%; } #pbPractice .pbPracFrame { width: 100%; min-height: clamp(560px, calc(100vh - 270px), 860px); height: 74vh; border: 0; border-radius: 8px; background: #393939; display: block; } /* Надёжный полноэкранный режим нот внутри Drumix. Используется вместо системного Fullscreen API, который недоступен для обычного iframe в мобильном Safari. */ body.pb-practice-sheet-fullscreen { overflow: hidden !important; --pbStudentRailW: 0px !important; } body.pb-practice-sheet-fullscreen #pbPractice { left: 0 !important; } body.pb-practice-sheet-fullscreen #TopNav, body.pb-practice-sheet-fullscreen #pbSongTools { display: none !important; } body.pb-practice-sheet-fullscreen #pbPractice .pbPracNotesCard { position: fixed !important; inset: 0 !important; z-index: 4900 !important; width: 100vw !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; border: 0 !important; border-radius: 0 !important; background: #0d0d0f !important; } body.pb-practice-sheet-fullscreen #pbPractice .pbPracNotesCard > .pbPracCardHd { display: none !important; } body.pb-practice-sheet-fullscreen #pbPractice .pbPracFrameWrap { width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 0 !important; } body.pb-practice-sheet-fullscreen #pbPractice .pbPracFrame { width: 100% !important; height: 100% !important; min-height: 100% !important; border-radius: 0 !important; } /* загрузчик поверх iframe фрагмента — «Идёт загрузка упражнения…» */ #pbPractice .pbPracLoading { position: absolute; inset: 0; border-radius: 12px; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; box-sizing: border-box; text-align: center; background: rgba(23,25,29,.97); color: #fff; font: 500 14px/1.3 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracLoading.pb-on { display: flex; } #pbPractice .pbPracLoadSpin { width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(255,255,255,.18); border-top-color: #0a84ff; animation: pbSpin .7s linear infinite; } #pbPractice .pbPracLoadMsg { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 330px; } #pbPractice .pbPracLoadMsg strong { color: #fff; font: 750 17px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #pbPractice .pbPracLoadMsg span { color: #b8c0cc; font: 500 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #pbPractice .pbPracLoading.pb-slow .pbPracLoadSpin { border-top-color: #ff9f0a; } #pbPractice .pbPracLoading.pb-slow .pbPracLoadMsg strong { color: #ffd28a; } @media (max-width: 899px) { #pbPractice .pbPracLoading { border-radius: 9px; } } @media (max-width: 600px) { #pbPractice .pbPracSpacer { width: 0; } #pbPractice .pbPracBody { padding: 14px 10px 28px; } #pbPractice .pbPracFrame { min-height: 440px; height: 64vh; } } /* ── строка «Минус» на экране отработки (родительский PBBacking, луп по калибровке) ── */ #pbPractice .pbPracMinus { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; width: 100%; box-sizing: border-box; background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); border: 1px solid rgba(0,113,227,.24); border-left: 5px solid var(--accent); border-radius: 8px; padding: 14px 18px; box-shadow: 0 12px 30px rgba(0,113,227,.12), 0 1px 2px rgba(0,0,0,.04); position: sticky; top: 74px; z-index: 2; /* всегда под рукой, даже когда длинный отрезок прокручен */ } #pbPractice .pbPracMinusPlay { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); border: 2px solid var(--accent); color: #fff; cursor: pointer; font-size: 18px; line-height: 1; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(0,113,227,.24); } #pbPractice .pbPracMinusPlay:hover { background: #0a7cff; } #pbPractice .pbPracMinusClose { display: none; } #pbPractice .pbPracMinusLbl { font: 800 10px/1 -apple-system, system-ui, sans-serif; letter-spacing: 0; color: #5f6f85; flex: 0 0 auto; } #pbPractice .pbPracMinusBadge { width: 30px; height: 30px; border-radius: 50%; background: #eef6ff; color: var(--accent); font-size: 16px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } #pbPractice .pbPracMinusMeta { line-height: 1.3; min-width: 160px; flex: 0 1 240px; } #pbPractice .pbPracMinusName { font: 800 14px/1.25 -apple-system, system-ui, sans-serif; color: #1d1d1f; } #pbPractice .pbPracMinusSub { font: 500 11px/1.35 -apple-system, system-ui, sans-serif; color: #5f6f85; } #pbPractice .pbPracTrackSeg { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 3px; border-radius: 8px; background: #eef1f5; border: 1px solid rgba(0,0,0,.08); } #pbPractice .pbPracTrackBtn { height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #4c5968; cursor: pointer; white-space: nowrap; font: 800 12px/1 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracTrackBtn b { font: inherit; } #pbPractice .pbPracTrackBtn small { display: none; } #pbPractice .pbPracTrackBtn.pbTrackOn, #pbPractice .pbPracTrackBtn.pbSegOn { background: var(--accent); color: #fff; box-shadow: 0 3px 10px rgba(0,113,227,.2); } #pbPractice .pbPracTrackBtn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } #pbPractice .pbPracHelperSound { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 36px; padding: 0 11px; border-radius: 7px; background: #eef1f5; color: #1f2937; font: 800 12px/1 -apple-system, system-ui, sans-serif; white-space: nowrap; cursor: pointer; } #pbPractice .pbPracHelperSound input { width: 16px; height: 16px; margin: 0; accent-color: var(--pbp-blue); cursor: pointer; } #pbPractice .pbPracDrumMix { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 460px; min-width: 390px; min-height: 39px; color: #1f2937; font: 800 12px/1 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracDrumPreset, #pbPractice .pbPracMasterPreset, #pbPractice .pbPracDrumVolume, #pbPractice .pbPracKickRoom { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; } #pbPractice .pbPracDrumPreset { flex: 1 1 255px; } #pbPractice .pbPracMasterPreset { flex: 0 1 190px; } #pbPractice .pbPracDrumPreset select, #pbPractice .pbPracMasterPreset select { flex: 1 1 auto; min-width: 180px; max-width: 230px; height: 36px; padding: 0 30px 0 10px; box-sizing: border-box; border: 1px solid #d7dee8; border-radius: 7px; background: #f2f5f9; color: #111827; font: 750 12px/1 -apple-system, system-ui, sans-serif; cursor: pointer; } #pbPractice .pbPracMasterPreset select { min-width: 112px; max-width: 145px; } #pbPractice .pbPracDrumPreset select:focus, #pbPractice .pbPracMasterPreset select:focus { outline: none; border-color: var(--pbp-blue); box-shadow: 0 0 0 3px rgba(11,111,243,.14); } #pbPractice .pbPracDrumVolume { flex: 0 1 210px; } #pbPractice .pbPracKickRoom { flex: 0 1 205px; } #pbPractice .pbPracDrumVolume input[type=range], #pbPractice .pbPracKickRoom input[type=range] { width: 92px; accent-color: var(--pbp-blue); cursor: pointer; } #pbPractice #pbPracDrumVolumeLbl { min-width: 34px; color: #1d1d1f; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; } #pbPractice #pbPracKickRoomLbl { min-width: 34px; color: #1d1d1f; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; } #pbPractice .pbPracCursorOffset { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 310px; min-width: 255px; min-height: 36px; box-sizing: border-box; padding: 3px 5px 3px 11px; border-radius: 7px; background: #eef1f5; color: #1f2937; font: 800 12px/1 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracCursorOffsetTitle { flex: 0 0 auto; } #pbPractice .pbPracCursorOffset input[type=range] { flex: 1 1 100px; min-width: 70px; accent-color: var(--pbp-blue); cursor: pointer; } #pbPractice .pbPracCursorOffsetLbl { flex: 0 0 92px; color: #526070; font: 700 11px/1 -apple-system, system-ui, sans-serif; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } #pbPractice .pbPracCursorOffsetReset { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: #fff; color: #1f2937; cursor: pointer; font: 800 17px/1 -apple-system, system-ui, sans-serif; box-shadow: 0 1px 3px rgba(15,23,42,.12); } #pbPractice .pbPracCursorOffsetReset:hover { color: var(--pbp-blue); } #pbPractice .pbPracSeekWrap { flex: 1 1 260px; min-width: 180px; display: flex; align-items: center; gap: 10px; } #pbPractice .pbPracSeekWrap input[type=range] { flex: 1; min-width: 80px; accent-color: var(--accent); cursor: pointer; } #pbPractice .pbPracTime { flex: 0 0 auto; font: 600 11px/1 -apple-system, system-ui, sans-serif; color: #86868b; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 70px; } #pbPractice .pbPracMinusSpeed, #pbPractice .pbPracMinusVolume { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; font: 600 11px/1 -apple-system, system-ui, sans-serif; color: #86868b; } #pbPractice .pbPracMinusSpeed input[type=range], #pbPractice .pbPracMinusVolume input[type=range] { width: 120px; accent-color: var(--accent); } #pbPractice #pbPracMinusSpeedLbl, #pbPractice #pbPracMinusVolumeLbl { font-weight: 700; color: #1d1d1f; min-width: 34px; font-variant-numeric: tabular-nums; } /* Practice redesign: sequential student workflow (notes -> backing -> kit). */ #pbPractice { --pbp-blue: #0b6ff3; --pbp-orange: #ff5a14; --pbp-ink: #0d1117; --pbp-muted: #5d6673; --pbp-line: #dde3ea; --pbp-card: #fff; } body.pb-practice #pbPractice { background: #f7f9fc; } #pbPractice { overflow-x: hidden; } #pbPractice .pbPracTopbar { position: absolute; left: 16px; top: 16px; z-index: 8; height: 32px; padding: 0; display: flex; align-items: center; gap: 0; background: transparent; border: 0; box-shadow: none; } #pbPractice .pbPracBrand { width: 146px; height: 32px; display: inline-flex; align-items: center; overflow: hidden; flex: 0 0 auto; text-decoration: none; } #pbPractice .pbPracBrand img { width: 144px; height: auto; display: block; } #pbPractice .pbPracNav { display: none; align-items: stretch; height: 56px; gap: 0; flex: 1 1 auto; min-width: 0; } #pbPractice .pbPracNavItem { display: inline-flex; align-items: center; justify-content: center; min-width: 116px; padding: 0 18px; color: #111827; font: 700 14px/1 -apple-system, system-ui, sans-serif; white-space: nowrap; } #pbPractice .pbPracNavItem.pb-on { color: #f45b16; background: #fff0e7; } #pbPractice .pbPracUser { display: none; align-items: center; justify-content: flex-end; gap: 14px; color: #111827; font: 700 13px/1 -apple-system, system-ui, sans-serif; white-space: nowrap; } #pbPractice .pbPracAvatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #20242c; color: #fff; font-weight: 800; } #pbPractice .pbPracHead { display: none; } #pbPractice .pbPracBody { max-width: none; width: calc(100% - 32px); margin: 0 auto; padding: 32px 0 24px; gap: 0; color: var(--pbp-ink); } #pbPractice .pbPracHero { position: relative; min-height: 62px; display: flex; align-items: flex-start; justify-content: center; gap: 0; } #pbPractice .pbPracBack { position: absolute; left: 0; top: 25px; height: 36px; border-radius: 5px; border: 1px solid #d8dee8; background: #fff; padding: 0 14px 0 12px; color: #111827; font: 800 13px/1 -apple-system, system-ui, sans-serif; box-shadow: 0 1px 2px rgba(13,17,23,.03); } #pbPractice .pbPracTitle { align-items: center; text-align: center; line-height: 1.18; } #pbPractice .pbPracTitleMain { font: 900 27px/1.08 -apple-system, system-ui, sans-serif; letter-spacing: 0; color: #06080c; } #pbPractice .pbPracTitleMeta { margin-top: 6px; font: 500 16px/1.2 -apple-system, system-ui, sans-serif; color: #596272; } #pbPractice .pbPracHeroActions { display: none; align-items: center; gap: 18px; } #pbPractice .pbPracHeroActions button { height: 44px; border-radius: 8px; border: 1px solid #d8dee8; background: #fff; padding: 0 18px; color: #111827; font: 800 14px/1 -apple-system, system-ui, sans-serif; box-shadow: 0 1px 2px rgba(13,17,23,.03); } #pbPractice .pbPracFlow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; min-height: 52px; margin-top: 16px; background: #fff; border: 1px solid #dfe5ee; border-radius: 7px; box-shadow: 0 10px 24px rgba(15,23,42,.06); overflow: hidden; } #pbPractice .pbPracStep { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; padding: 0 18px; position: relative; border-right: 1px solid #e3e7ee; background: #fff; } #pbPractice .pbPracStep:last-child { border-right: 0; } #pbPractice .pbPracStep:not(:last-child):after { content: ""; position: absolute; right: -13px; top: -1px; z-index: 2; width: 26px; height: calc(100% + 2px); background: #fff; border-top: 1px solid #dfe5ee; border-right: 1px solid #dfe5ee; transform: skewX(-28deg); transform-origin: center; } #pbPractice .pbPracStep.pb-active { border: 1px solid var(--pbp-blue); margin: -1px 0 -1px -1px; border-radius: 7px 0 0 7px; box-shadow: 0 0 0 1px rgba(11,111,243,.04); z-index: 3; } #pbPractice .pbPracStepNo { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #555c67; color: #fff; font: 900 16px/1 -apple-system, system-ui, sans-serif; flex: 0 0 auto; } #pbPractice .pbPracStep > div { min-width: 0; } #pbPractice .pbPracStep.pb-active .pbPracStepNo { background: var(--pbp-blue); box-shadow: inset 0 -10px 18px rgba(0,0,0,.08); } #pbPractice .pbPracStep.pb-accent .pbPracStepNo { background: var(--pbp-orange); box-shadow: inset 0 -10px 18px rgba(0,0,0,.08); } #pbPractice .pbPracStep b { display: block; color: #08111f; font: 900 15px/1.1 -apple-system, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pbPractice .pbPracStep.pb-active b { color: var(--pbp-blue); } #pbPractice .pbPracStep.pb-accent b { color: var(--pbp-orange); } #pbPractice .pbPracStep small { display: block; margin-top: 6px; color: #6b7280; font: 600 12px/1.2 -apple-system, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pbPractice .pbPracStepPlay { margin-left: auto; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--pbp-blue); color: #fff; font-size: 20px; box-shadow: 0 10px 22px rgba(11,111,243,.24); cursor: pointer; } #pbPractice .pbPracStepGo { margin-left: auto; height: 38px; border: 0; border-radius: 7px; padding: 0 18px; background: var(--pbp-orange); color: #fff; font: 900 14px/1 -apple-system, system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 18px rgba(255,90,20,.22); } #pbPractice .pbPracStepGhost { margin-left: auto; height: 38px; border: 0; border-radius: 7px; padding: 0 12px; background: #eef1f5; color: #1f2937; font: 800 12px/1 -apple-system, system-ui, sans-serif; cursor: pointer; white-space: nowrap; } #pbPractice .pbPracGrid { display: block; } #pbPractice .pbPracCard, #pbPractice .pbPracPlan, #pbPractice .pbPracMinus, #pbPractice .pbPracViz { background: #fff; border: 1px solid #e0e6ef; border-radius: 11px; box-shadow: 0 10px 28px rgba(15,23,42,.07); } #pbPractice .pbPracCard { margin-top: 14px; padding: 14px 18px 10px; gap: 8px; } #pbPractice .pbPracNotesCard { padding-left: 8px; padding-right: 8px; } #pbPractice .pbPracCardHd { padding: 0; justify-content: flex-start; gap: 12px; color: #111827; font: 900 18px/1.15 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracCardHd span { display: flex; flex-direction: column; gap: 4px; } #pbPractice .pbPracCardHd small { color: #5b6573; font: 500 14px/1.25 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracCardHd em { display: inline-flex; align-items: center; height: 27px; padding: 0 13px; border-radius: 6px; background: var(--pbp-blue); color: #fff; font: 800 12px/1 -apple-system, system-ui, sans-serif; font-style: normal; } #pbPractice .pbPracFrameWrap { border-radius: 7px; overflow: hidden; margin-top: 6px; } #pbPractice .pbPracFrame { min-height: 0; height: 248px !important; border-radius: 7px; background: #1d1f23; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } #pbPractice .pbPracPlayHint { position: relative; display: inline-flex; align-items: center; min-height: 39px; margin-top: 16px; padding: 0 18px; border-radius: 6px; background: var(--pbp-blue); color: #fff; font: 900 14px/1 -apple-system, system-ui, sans-serif; box-shadow: 0 8px 18px rgba(11,111,243,.18); } #pbPractice .pbPracPlayHint:before { content: ""; position: absolute; left: 35px; top: -36px; width: 24px; height: 38px; background: linear-gradient(90deg, transparent 0 9px, #68a6ff 9px 15px, transparent 15px); } #pbPractice .pbPracPlayHint:after { content: ""; position: absolute; left: 24px; top: -40px; width: 26px; height: 26px; border-left: 3px solid #68a6ff; border-top: 3px solid #68a6ff; transform: rotate(45deg); } #pbPractice .pbPracPlan { padding: 20px 20px 16px; } #pbPractice .pbPracPlanTop { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #pbPractice .pbPracPlan h3 { margin: 0; color: #111827; font: 900 21px/1.1 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracPlanTop strong { display: inline-flex; align-items: center; justify-content: center; width: 49px; height: 34px; border-radius: 17px; border: 1px solid #dce3ec; background: #fff; color: #0f172a; font: 900 17px/1 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracPlanBar { height: 8px; border-radius: 99px; margin: 12px 0 18px; background: #e4e8ee; overflow: hidden; } #pbPractice .pbPracPlanBar span { display: block; width: 0; height: 100%; background: var(--pbp-blue); } #pbPractice .pbPracTask { height: 48px; display: flex; align-items: center; gap: 15px; margin-bottom: 8px; padding: 0 16px; border: 1px solid #dfe5ee; border-radius: 9px; background: #fff; color: #111827; font: 700 14px/1.2 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracTask i { width: 30px; color: var(--pbp-blue); font-style: normal; font-size: 25px; text-align: center; } #pbPractice .pbPracTask:nth-of-type(5) i { color: var(--pbp-orange); } #pbPractice .pbPracTask span { flex: 1 1 auto; } #pbPractice .pbPracTask b { color: #b8c0cc; letter-spacing: 1px; } #pbPractice .pbPracAdvice { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; padding: 10px 16px; border: 1px solid #cfe0ff; background: #f4f8ff; border-radius: 9px; color: #0b4fb3; font: 700 13px/1.35 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracMinus { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; width: 100%; min-height: 94px; margin-top: 12px; padding: 15px 22px; box-sizing: border-box; overflow: hidden; border-left: 1px solid #e0e6ef; background: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.07); position: static; } #pbPractice .pbPracMinusHead { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 0 auto; } #pbPractice .pbPracMinusHead h2, #pbPractice .pbPracVizTitle h2 { margin: 0; color: #111827; font: 900 18px/1.1 -apple-system, system-ui, sans-serif; white-space: nowrap; } #pbPractice .pbPracMinusHead span, #pbPractice .pbPracVizTitle span { display: inline-flex; align-items: center; height: 25px; padding: 0 12px; border-radius: 7px; background: #eef1f5; color: #4b5563; font: 800 12px/1 -apple-system, system-ui, sans-serif; white-space: nowrap; } #pbPractice .pbPracMinusPlay { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--pbp-orange); color: #fff; font-size: 18px; box-shadow: 0 9px 18px rgba(255,90,20,.22); } #pbPractice .pbPracMinusMeta { min-width: 160px; flex: 0 0 210px; } #pbPractice .pbPracMinusName { color: #ff4f0d; font: 900 15px/1.1 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracMinusSub { display: none; } #pbPractice .pbPracMinusBadge { display: none; } #pbPractice .pbPracTrackSeg { height: 39px; padding: 2px; border-radius: 20px; background: #f2f5f9; border: 1px solid #dbe3ee; gap: 0; } #pbPractice .pbPracTrackBtn { height: 33px; min-width: 86px; border-radius: 17px; color: #111827; font: 800 13px/1 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracTrackBtn.pbTrackOn, #pbPractice .pbPracTrackBtn.pbSegOn { background: #fff; color: var(--pbp-blue); box-shadow: 0 1px 4px rgba(15,23,42,.08); } #pbPractice .pbPracSeekWrap { flex: 1 1 420px; min-width: 0; gap: 12px; } #pbPractice .pbPracWaveSeek { --pb-prac-seek-progress: 0%; position: relative; flex: 1 1 auto; min-width: 80px; height: 38px; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 7px; background: #f2f5f9; } #pbPractice .pbPracWaveSeek:focus-within { border-color: var(--pbp-blue); box-shadow: 0 0 0 3px rgba(11,111,243,.14); } #pbPractice .pbPracWaveBars { position: absolute; inset: 6px 8px; display: flex; align-items: center; justify-content: space-between; gap: 2px; overflow: hidden; pointer-events: none; } #pbPractice .pbPracWaveBars i { display: block; flex: 1 1 2px; min-width: 1px; max-width: 5px; height: var(--pb-prac-wave-height); border-radius: 2px; background: #aeb9c8; opacity: .78; } #pbPractice .pbPracWaveBarsPlayed { -webkit-clip-path: inset(0 calc(100% - var(--pb-prac-seek-progress)) 0 0); clip-path: inset(0 calc(100% - var(--pb-prac-seek-progress)) 0 0); } #pbPractice .pbPracWaveBarsPlayed i { background: var(--pbp-blue); opacity: 1; } #pbPractice .pbPracWaveSeek input[type=range] { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; } #pbPractice .pbPracWaveSeek input[type=range]::-webkit-slider-runnable-track { height: 38px; border: 0; background: transparent; } #pbPractice .pbPracWaveSeek input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: 11px; border: 3px solid var(--pbp-blue); border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(15,23,42,.28); } #pbPractice .pbPracWaveSeek input[type=range]::-moz-range-track { height: 38px; border: 0; background: transparent; } #pbPractice .pbPracWaveSeek input[type=range]::-moz-range-progress { background: transparent; } #pbPractice .pbPracWaveSeek input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--pbp-blue); border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(15,23,42,.28); } #pbPractice .pbPracSeekWrap input[type=range], #pbPractice .pbPracMinusSpeed input[type=range], #pbPractice .pbPracMinusVolume input[type=range] { accent-color: var(--pbp-blue); } #pbPractice .pbPracTime { min-width: auto; color: #111827; font: 700 13px/1 -apple-system, system-ui, sans-serif; } #pbPractice .pbPracMinusSpeed, #pbPractice .pbPracMinusVolume { color: #111827; font: 800 13px/1 -apple-system, system-ui, sans-serif; gap: 13px; } #pbPractice .pbPracControlName { white-space: nowrap; } #pbPractice .pbPracMinusSpeed input[type=range], #pbPractice .pbPracMinusVolume input[type=range] { width: 120px; } #pbPractice .pbPracViz { margin-top: 10px; padding: 14px 18px 6px; } #pbPractice .pbPracVizTitle { display: flex; align-items: center; gap: 14px; height: 26px; margin: 0 0 8px; } #pbPractice .pbPracVizStage { position: relative; min-height: 322px; border-radius: 7px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 52% 42%, #34404d 0, #151d28 48%, #070b12 100%); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } #pbPractice .pbPracVizStage:active { cursor: grabbing; } #pbPractice .pbPracVizPanel { position: absolute; left: 20px; top: 18px; z-index: 2; width: auto; padding: 0; border-radius: 0; color: #fff; background: transparent; box-shadow: none; display: flex; align-items: center; gap: 9px; } #pbPractice .pbPracVizPanel b, #pbPractice .pbPracVizPanel p { display: none; } #pbPractice .pbPracVizPanel label { margin: 0; } #pbPractice .pbPracVizPanel input { position: absolute; opacity: 0; pointer-events: none; } #pbPractice .pbPracVizToggle span { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; border-radius: 7px; background: rgba(255,255,255,.95); color: #111827; font: 900 13px/1 -apple-system, system-ui, sans-serif; box-shadow: 0 8px 18px rgba(0,0,0,.16); } #pbPractice .pbPracVizToggle input:checked + span { background: var(--pbp-blue); color: #fff; box-shadow: 0 8px 18px rgba(11,111,243,.28); } #pbPractice .pbPracVizBtn { position: absolute; right: 20px; top: 20px; z-index: 2; height: 41px; padding: 0 22px; border-radius: 7px; border: 0; background: #fff; color: #111827; font: 900 14px/1 -apple-system, system-ui, sans-serif; box-shadow: 0 8px 20px rgba(0,0,0,.22); } #pbPractice .pbPracVizKit:not(.pbPracVizPhotoKit) { display: none; } #pbPractice .pbPracVizPhotoKit { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transform: none; overflow: visible; } #pbPractice .pbPracVizPhotoBase { pointer-events: none; } #pbPractice .pbPracVizPiece { transform-box: fill-box; transform-origin: center; transition: transform .1s ease, filter .1s ease, opacity .1s ease; } #pbPractice .pbPracVizPiece .pbHitSurface, #pbPractice .pbPracVizPiece .pbDrumRim, #pbPractice .pbPracVizPiece .pbHitRing, #pbPractice .pbPracVizPiece .pbHitHalo { transition: fill .1s ease, stroke .1s ease, stroke-width .1s ease, filter .1s ease, opacity .1s ease; } #pbPractice .pbPracPhotoZone, #pbPractice .pbPracPhotoZone .pbHitSurface, #pbPractice .pbPracPhotoZone .pbHitRing, #pbPractice .pbPracPhotoZone .pbHitHalo { transition: none; } #pbPractice .pbPracPhotoZone .pbHitHalo, #pbPractice .pbPracPhotoZone .pbHitRing { opacity: 0; pointer-events: none; mix-blend-mode: screen; } #pbPractice .pbPracPhotoZone .pbHitRing { fill: none; stroke-width: 5; stroke-linecap: round; } #pbPractice .pbPracPhotoWarm .pbHitRing { stroke: rgba(255,190,92,.98); } #pbPractice .pbPracPhotoBlue .pbHitRing { stroke: rgba(127,205,255,.98); } #pbPractice .pbPracPhotoZone .pbPhotoHitSurface { fill: transparent; stroke: transparent; stroke-width: 0; pointer-events: none; } #pbPractice .pbPracPhotoZone[data-hit~="kick"], #pbPractice .pbPracPhotoZone[data-hit~="kick"] .pbPhotoHitSurface { cursor: pointer; pointer-events: all; } #pbPractice .pbPracVizPiece.pb-hit { filter: drop-shadow(0 0 13px rgba(255,137,32,.78)) drop-shadow(0 0 24px rgba(255,107,18,.34)); transform: scale(1.006); } #pbPractice .pbPracVizPiece.pb-hit .pbHitHalo { opacity: .92; } #pbPractice .pbPracPhotoZone.pb-hit .pbHitRing { opacity: .96; } #pbPractice .pbPracPhotoWarm.pb-hit .pbPhotoHitSurface { fill: rgba(255,139,32,.12); stroke: rgba(255,207,122,.92); stroke-width: 4; } #pbPractice .pbPracPhotoBlue.pb-hit .pbPhotoHitSurface { fill: rgba(40,155,255,.15); stroke: rgba(139,211,255,.95); stroke-width: 4; } #pbPractice .pbPracVizPiece.pb-hit .pbCymbalSurface { fill: url(#pbKitCymLit); stroke: #ffe7a8; stroke-width: 3; } #pbPractice .pbPracVizPiece.pb-hit .pbDrumHead, #pbPractice .pbPracVizPiece.pb-hit .pbKickHead { fill: url(#pbKitHeadLit); stroke: #ffd184; stroke-width: 4; } #pbPractice .pbPracVizPiece.pb-hit .pbDrumRim { stroke: #ffd184; } #pbPractice .pbPracSnare.pb-hit, #pbPractice .pbPracRideBell.pb-hit { filter: drop-shadow(0 0 13px rgba(48,157,255,.86)) drop-shadow(0 0 26px rgba(28,117,255,.36)); } #pbPractice .pbPracSnare.pb-hit .pbDrumHead { fill: url(#pbKitSnareHeadLit); stroke: #91ccff; stroke-width: 4; } #pbPractice .pbPracSnare.pb-hit .pbDrumRim, #pbPractice .pbPracRideBell.pb-hit .pbCymbalSurface { stroke: #9bd3ff; } #pbPractice .pbPracRideBell.pb-hit .pbCymbalSurface { fill: url(#pbKitBlueCymLit); stroke-width: 3; } #pbPractice .pbPracTom3 .pbTom3Overlay { opacity: 0; stroke: transparent; stroke-width: 0; } #pbPractice .pbPracTom3.pb-hit .pbTom3Overlay { opacity: .55; stroke: #ffd184; stroke-width: 4; } #pbPractice .pbPracKitHardware path, #pbPractice .pbPracKitHardware line, #pbPractice .pbPracKitPedals path { vector-effect: non-scaling-stroke; } #pbPractice .pbKitLugs { fill: #d7dce3; stroke: #0b1018; stroke-width: 1; } #pbPractice .pbKitLugs rect { fill: url(#pbKitChrome); stroke: #0b1018; stroke-width: 1; } #pbPractice .pbPracVizLabel { display: none; fill: #e8edf5; font: 800 18px/1 -apple-system, system-ui, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 4px; stroke-linejoin: round; } #pbPractice .pbPracVizStage.pb-labels-on .pbPracVizLabel { display: block; } @media (max-width: 1180px) { #pbPractice .pbPracBody { width: calc(100% - 24px); padding: 22px 0 34px; } #pbPractice .pbPracGrid { grid-template-columns: 1fr; } #pbPractice .pbPracFlow { grid-template-columns: 1fr; } #pbPractice .pbPracStep { border-right: 0; border-bottom: 1px solid #e3e7ee; } #pbPractice .pbPracMinus { flex-wrap: wrap; } } @media (max-width: 760px) { #pbPractice .pbPracTopbar { position: relative; left: auto; top: auto; width: 100%; height: auto; padding: 12px 14px 4px; box-sizing: border-box; flex-wrap: wrap; gap: 10px; } #pbPractice .pbPracBrand { width: 150px; height: 34px; } #pbPractice .pbPracBrand img { width: 148px; } #pbPractice .pbPracNav { order: 3; width: 100%; height: auto; overflow-x: auto; } #pbPractice .pbPracNavItem { min-width: auto; padding: 10px 12px; } #pbPractice .pbPracUser { margin-left: auto; } #pbPractice .pbPracBody { width: calc(100% - 20px); padding: 8px 0 24px; } #pbPractice .pbPracHero { min-height: 0; flex-direction: column; align-items: stretch; gap: 12px; } #pbPractice .pbPracBack { position: static; align-self: flex-start; } #pbPractice .pbPracTitle { width: 100%; } #pbPractice .pbPracTitleMain { font-size: 23px; } #pbPractice .pbPracTitleMeta { font-size: 13px; } #pbPractice .pbPracHeroActions { flex-wrap: wrap; } #pbPractice .pbPracFlow { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 48px; margin-top: 12px; } #pbPractice .pbPracStep { min-height: 48px; padding: 0 6px; gap: 6px; border-right: 1px solid #e3e7ee; border-bottom: 0; } #pbPractice .pbPracStep:last-child { border-right: 0; } #pbPractice .pbPracStep:not(:last-child):after { display: none; } #pbPractice .pbPracStepNo { width: 24px; height: 24px; font-size: 12px; } #pbPractice .pbPracStep b { font-size: 12px; } #pbPractice .pbPracCard { padding: 12px 10px 8px; } #pbPractice .pbPracCardHd { font-size: 16px; } #pbPractice .pbPracCardHd small { font-size: 12px; } #pbPractice .pbPracFrame { height: 300px !important; } #pbPractice .pbPracPlan { padding: 22px 18px; } #pbPractice .pbPracMinusHead { width: 100%; flex-wrap: wrap; } #pbPractice .pbPracMinusHead h2, #pbPractice .pbPracVizTitle h2, #pbPractice .pbPracMinusHead span, #pbPractice .pbPracVizTitle span { white-space: normal; max-width: 100%; height: auto; min-height: 25px; line-height: 1.25; } #pbPractice .pbPracVizTitle { flex-direction: column; align-items: flex-start; flex-wrap: wrap; } #pbPractice .pbPracTrackSeg { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } #pbPractice .pbPracTrackBtn { min-width: 0; } #pbPractice .pbPracViz { padding: 12px 8px 6px; } #pbPractice .pbPracVizStage { min-height: clamp(320px, 88vw, 430px); } #pbPractice .pbPracVizPanel { position: relative; left: auto; top: auto; width: auto; margin: 12px; } #pbPractice .pbPracVizBtn { top: auto; bottom: 16px; right: 16px; } #pbPractice .pbPracVizPhotoKit { left: 50%; right: auto; width: 152%; height: 354px; bottom: 24px; transform: translateX(-50%); } } /* Плавающая установка на экране отработки: отдельное окно поверх нот и минусовки. */ body.pb-practice #pbPractice .pbPracViz { position: fixed; left: 0; top: 0; z-index: 4600; display: flex; flex-direction: column; width: 620px; height: 250px; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; border-radius: 11px; background: #101318; box-shadow: 0 18px 54px rgba(0,0,0,.34), 0 3px 12px rgba(0,0,0,.2); } body.pb-practice #pbPractice .pbPracVizTitle { display: flex; flex: 0 0 42px; align-items: center; gap: 9px; width: 100%; height: 42px; min-height: 42px; margin: 0; padding: 0 10px; box-sizing: border-box; background: #1d1d1f; cursor: grab; touch-action: none; user-select: none; } body.pb-practice #pbPractice .pbPracVizTitle:active { cursor: grabbing; } body.pb-practice #pbPractice .pbPracVizTitle h2 { color: #fff; font-size: 14px; } body.pb-practice #pbPractice .pbPracVizGrip { display: grid; grid-template-columns: repeat(2, 3px); gap: 3px; width: auto; height: auto; min-height: 0; padding: 0; border-radius: 0; background: transparent; flex: none; margin-right: auto; } body.pb-practice #pbPractice .pbPracVizGrip i { width: 3px; height: 3px; border-radius: 50%; background: #77777d; } body.pb-practice #pbPractice .pbPracVizTitle .pbPracVizTitleHint { display: block; flex: 1; min-width: 0; width: auto; height: auto; min-height: 0; padding: 0; border-radius: 0; background: transparent; color: #a8a8ae; font: 600 11px/1 -apple-system, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.pb-practice #pbPractice .pbPracVizCollapsedLabel { display: none; } body.pb-practice #pbPractice .pbPracVizCollapse, body.pb-practice #pbPractice .pbPracVizSettings, body.pb-practice #pbPractice .pbPracVizReset { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #b8b8bd; font-size: 18px; line-height: 28px; cursor: pointer; } body.pb-practice #pbPractice .pbPracVizCollapse:hover, body.pb-practice #pbPractice .pbPracVizSettings:hover, body.pb-practice #pbPractice .pbPracVizReset:hover { background: #303034; color: #fff; } body.pb-practice #pbPractice .pbPracVizSettings[aria-expanded="true"] { background: #0a84ff; color: #fff; } body.pb-practice #pbPractice .pbPracVizStage { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; height: auto; border-radius: 0; overflow: hidden; } body.pb-practice #pbPractice .pbPracVizPanel { position: absolute; left: 9px; top: 9px; width: auto; margin: 0; z-index: 3; display: none; } body.pb-practice #pbPractice .pbPracViz.pb-settings-open .pbPracVizPanel { display: block; } body.pb-practice #pbPractice .pbPracVizToggle span { height: 30px; padding: 0 12px; font-size: 11px; } body.pb-practice #pbPractice .pbPracVizPhotoKit { left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transform: none; } body.pb-practice #pbPractice .pbPracVizResize { position: absolute; right: 0; bottom: 0; z-index: 6; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 0 52%, #818188 52% 60%, transparent 60% 70%, #818188 70% 78%, transparent 78%); } body.pb-practice #pbPractice .pbPracViz.pb-collapsed .pbPracVizStage, body.pb-practice #pbPractice .pbPracViz.pb-collapsed .pbPracVizResize { display: none; } body.pb-practice #pbPractice .pbPracViz.pb-collapsed .pbPracVizSettings, body.pb-practice #pbPractice .pbPracViz.pb-collapsed .pbPracVizReset { display: none; } body.pb-practice #pbPractice .pbPracViz.pb-collapsed .pbPracVizCollapsedLabel { display: block; flex: 1 1 auto; min-width: 0; height: auto; padding: 0; overflow: hidden; border-radius: 0; background: transparent; text-overflow: ellipsis; white-space: nowrap; color: #f5f5f7; font: 700 12px/1 -apple-system, system-ui, sans-serif; } body.pb-practice #pbPractice .pbPracViz.pb-collapsed .pbPracVizGrip { margin-right: 0; } @media (max-width: 600px) { body.pb-practice #pbPractice .pbPracVizTitle .pbPracVizTitleHint { display: none; } body.pb-practice #pbPractice .pbPracVizTitle { gap: 7px; } body.pb-practice #pbPractice .pbPracVizPanel { position: absolute; left: 7px; top: 7px; margin: 0; } body.pb-practice #pbPractice .pbPracVizToggle span { height: 28px; padding: 0 9px; } } /* YouTube-минус: плавающее окно поверх оверлея отработки */ body.pb-practice #pbFloatYT { z-index: 4500; } @media (max-width: 600px) { #pbPractice .pbPracMinus { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 12px; top: 64px; } #pbPractice .pbPracMinusHead { grid-column: 1 / -1; width: 100%; gap: 8px; } #pbPractice .pbPracMinusHead span { width: 100%; box-sizing: border-box; padding: 6px 9px; } #pbPractice .pbPracMinusPlay { grid-column: 1; width: 48px; height: 48px; } #pbPractice .pbPracMinusMeta { grid-column: 2; min-width: 0; width: 100%; } #pbPractice .pbPracTrackSeg { grid-column: 1 / -1; order: initial; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } #pbPractice .pbPracTrackBtn { min-width: 0; padding: 0 6px; } #pbPractice .pbPracHelperSound { grid-column: 1 / -1; justify-self: start; } #pbPractice .pbPracDrumMix { grid-column: 1 / -1; width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } #pbPractice .pbPracDrumPreset, #pbPractice .pbPracMasterPreset, #pbPractice .pbPracDrumVolume, #pbPractice .pbPracKickRoom { width: 100%; min-width: 0; justify-content: flex-start; } #pbPractice .pbPracDrumPreset select, #pbPractice .pbPracMasterPreset select { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; } #pbPractice .pbPracDrumVolume input[type=range], #pbPractice .pbPracKickRoom input[type=range] { flex: 1 1 100px; width: auto; min-width: 80px; max-width: 180px; } #pbPractice #pbPracDrumVolumeLbl, #pbPractice #pbPracKickRoomLbl { margin-left: auto; } #pbPractice .pbPracCursorOffset { grid-column: 1 / -1; width: 100%; min-width: 0; } #pbPractice .pbPracCursorOffset input[type=range] { min-width: 60px; } #pbPractice .pbPracSeekWrap { grid-column: 1 / -1; order: initial; min-width: 0; width: 100%; } #pbPractice .pbPracSeekWrap input[type=range] { width: 100%; min-width: 0; } #pbPractice .pbPracTime { display: none; } #pbPractice .pbPracMinusSpeed, #pbPractice .pbPracMinusVolume { grid-column: 1 / -1; order: initial; width: 100%; justify-content: flex-start; gap: 8px; } #pbPractice .pbPracMinusSpeed input[type=range], #pbPractice .pbPracMinusVolume input[type=range] { flex: 1 1 100px; width: auto; min-width: 80px; max-width: 180px; } #pbPractice #pbPracMinusSpeedLbl, #pbPractice #pbPracMinusVolumeLbl { margin-left: auto; } #pbPractice .pbPracMinusSub { display: none; } } /* Обработка всегда живёт рядом с установкой, поэтому её не перекрывает само плавающее окно. */ body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix { position: absolute; left: 9px; right: 9px; bottom: 9px; z-index: 5; display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; width: auto; min-width: 0; min-height: 40px; padding: 5px 8px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(22,22,24,.90); color: #f5f5f7; box-shadow: 0 6px 20px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix { display: none; } body.pb-practice #pbPractice .pbPracViz.pb-settings-open .pbPracVizStage > .pbPracDrumMix { display: flex; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracDrumPreset { flex: 1 1 300px; width: auto; min-width: 0; color: #d1d1d6; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracMasterPreset { flex: 0 1 190px; width: auto; min-width: 0; color: #d1d1d6; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracDrumPreset select, body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracMasterPreset select { flex: 1 1 auto; width: auto; min-width: 160px; max-width: 215px; height: 32px; color-scheme: dark; border-color: rgba(255,255,255,.14); background: #2c2c2e; color: #f5f5f7; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracMasterPreset select { min-width: 105px; max-width: 135px; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracDrumVolume { flex: 0 1 205px; width: auto; min-width: 0; color: #d1d1d6; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracKickRoom { flex: 0 1 210px; width: auto; min-width: 0; color: #d1d1d6; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracDrumVolume input[type=range], body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracKickRoom input[type=range] { width: 82px; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix #pbPracDrumVolumeLbl, body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix #pbPracKickRoomLbl { color: #f5f5f7; } @media (max-width: 600px) { body.pb-practice #pbPractice .pbPracViz.pb-settings-open .pbPracVizStage > .pbPracDrumMix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; max-height: 132px; overflow-y: auto; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix { left: 6px; right: 6px; bottom: 6px; display: flex; grid-template-columns: none; flex-wrap: nowrap; gap: 7px; padding: 5px 6px; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracDrumPreset { flex: 1 1 190px; width: auto; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracMasterPreset { flex: 0 1 102px; width: auto; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracDrumPreset > span, body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracMasterPreset > span, body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracDrumVolume > span:first-child, body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracKickRoom > span:first-child { display: none; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracDrumPreset select, body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracMasterPreset select { width: 100%; min-width: 0; max-width: none; padding-left: 8px; font-size: 11px; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracDrumVolume { flex: 0 1 118px; width: auto; min-width: 0; gap: 5px; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracKickRoom { flex: 0 1 118px; width: auto; min-width: 0; gap: 5px; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracDrumVolume input[type=range], body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix .pbPracKickRoom input[type=range] { flex: 1 1 66px; width: 66px; min-width: 52px; max-width: 76px; } body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix #pbPracDrumVolumeLbl, body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix #pbPracKickRoomLbl { margin-left: 0; min-width: 31px; font-size: 11px; } } @media (max-width: 600px) { body.pb-practice #pbPractice .pbPracVizStage > .pbPracDrumMix { display: none; } body.pb-practice #pbPractice .pbPracViz.pb-settings-open .pbPracVizStage > .pbPracDrumMix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* Ученик: минусовка всегда доступна в нижнем доке, без декоративной волны. */ body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracBody { padding-bottom: 195px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinus { position: fixed; left: var(--pbStudentRailW, 0px); right: 0; top: auto; bottom: 0; z-index: 4650; width: auto; min-height: 108px; margin: 0; border-radius: 11px 11px 0 0; box-shadow: 0 -12px 34px rgba(15,23,42,.14), 0 -1px 0 rgba(15,23,42,.06); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracWaveBars { display: none; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracWaveSeek { height: 28px; overflow: visible; border: 0; border-radius: 0; background: linear-gradient(#cbd3df, #cbd3df) center / 100% 4px no-repeat; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracWaveSeek input[type=range], body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracWaveSeek input[type=range]::-webkit-slider-runnable-track, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracWaveSeek input[type=range]::-moz-range-track { height: 28px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracWaveSeek input[type=range]::-webkit-slider-thumb { margin-top: 6px; } @media (max-width: 899px) { body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracBody { padding-bottom: 238px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinus { left: 0; top: auto; min-height: 0; max-height: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px 10px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusHead, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracHelperSound, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracCursorOffset { display: none; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusSpeed, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusVolume { margin: 0; min-height: 30px; } } /* Должно идти после мобильного focus-блока, который раньше скрывал тему. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch { display: inline-flex !important; } /* Финальная desktop-позиция темы: элемент живёт в левом rail, не в шапке. */ @media (min-width: 900px) { body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbStudentThemeSwitch { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 96px; height: 57px; padding: 5px 2px 4px; flex-direction: column; gap: 5px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; z-index: auto; } } /* ===================== ЭТАП 2 · РАЗДЕЛ «НОТЫ» (MOBILE FIRST) ===================== */ /* Оболочка создаётся поверх прежних контролов. Бизнес-логика выбора, зума, полноэкранного режима, undo и операций с тактами остаётся в существующем JS. */ #pbAdminNotesHead, #pbAdminNotesQuickRow, .pbMeasureActionsBackdrop { display: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbInspDesc { color: #6e6e73; font: 400 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover .pbPopTitle { display: flex; align-items: center; justify-content: space-between; gap: 12px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover .pbPopClose { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; min-width: 34px; height: 34px; min-height: 34px; margin: -5px -5px -5px 0; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #6e6e73; font-size: 23px; line-height: 1; text-align: center; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover .pbPopClose:hover { background: #ececf0; color: #1d1d1f; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesMobileUndo:focus-visible, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesMobileFullscreen:focus-visible, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbAdminNotesMobileZoom button:focus-visible, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesQuickRow button:focus-visible, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbSongMeasureActions:focus-visible, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbFloatingMeasureActions:focus-visible, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover:focus-visible, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover button:focus-visible, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbZoomLabel:focus-visible { outline: 3px solid rgba(0,113,227,.30); outline-offset: 2px; } /* Телефон и планшет: заголовок листа остаётся рядом с нотами, а выбранный диапазон получает большую контекстную карточку над нижней навигацией. */ @media (max-width: 899px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbAdminNotesHead { position: sticky; top: 0; z-index: 120; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px 10px; width: calc(100% - 16px); max-width: 1180px; margin: 8px auto 10px; padding: 11px 12px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.08); border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 6px 22px rgba(0,0,0,.07); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadCopy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadCopy strong { overflow: hidden; color: #1d1d1f; font-size: 16px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadCopy span { overflow: hidden; color: #6e6e73; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadActions { display: flex; align-items: center; gap: 7px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadActions button { min-width: 44px; min-height: 44px; height: 44px; margin: 0; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(0,0,0,.10); border-radius: 11px; background: #fff; color: #1d1d1f; font: 650 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadActions button:disabled { opacity: .38; cursor: default; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesMobileFullscreen { border-color: rgba(0,113,227,.18) !important; background: rgba(0,113,227,.08) !important; color: var(--accent) !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesMobileZoom { grid-column: 1 / -1; display: grid; grid-template-columns: 48px minmax(82px, 1fr) 48px; gap: 2px; width: 100%; min-height: 44px; padding: 3px; box-sizing: border-box; border-radius: 11px; background: #ececf0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesMobileZoom button { min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #1d1d1f; font: 700 17px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead #pbAdminNotesMobileZoomLabel { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.10); color: #3a3a3c; font-size: 13px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbMobileSheet { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingLoopBar.pb-on { left: 8px; right: 8px; bottom: calc(var(--pb-admin-nav-h) + 8px + env(safe-area-inset-bottom, 0px)); z-index: 7200; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "status status" "edit edit" "practice actions" "clear clear"; gap: 8px; width: auto; max-width: none; margin: 0; padding: 12px; transform: none; border-radius: 17px; box-sizing: border-box; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingLoopText { grid-area: status; width: 100%; padding: 1px 2px 3px; box-sizing: border-box; text-align: left; white-space: normal; font-size: 14px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingEditBtn { grid-area: edit; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingPracticeBtn { grid-area: practice; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingMeasureActions { grid-area: actions; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingClearBtn { grid-area: clear; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingRowBtn { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingLoopBar button { width: 100%; min-width: 0; min-height: 46px; height: auto; padding: 10px 9px; border-radius: 11px; white-space: normal; line-height: 1.2; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingEditBtn { background: var(--accent); color: #fff; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingMeasureActions { border-color: rgba(0,113,227,.18); background: rgba(0,113,227,.08); color: var(--accent); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingClearBtn { background: #fff; color: #6e6e73; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-measure-actions-open #pbFloatingLoopBar { visibility: hidden; pointer-events: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasureActionsBackdrop { position: fixed; inset: 0; z-index: 9440; display: block; background: rgba(0,0,0,.30); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover.pbMeasurePopoverExplicit { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(var(--pb-admin-nav-h) + 8px + env(safe-area-inset-bottom, 0px)) !important; z-index: 9500; width: auto; min-width: 0; max-height: calc(100dvh - var(--pb-admin-nav-h) - 92px - env(safe-area-inset-bottom, 0px)); padding: 8px; box-sizing: border-box; border-radius: 18px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover.pbMeasurePopoverExplicit .pbPopTitle { position: sticky; top: -8px; z-index: 2; min-height: 48px; margin: -1px 0 4px; padding: 6px 8px 7px 11px; box-sizing: border-box; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover.pbMeasurePopoverExplicit > button { min-height: 46px; padding: 11px 12px; white-space: normal; line-height: 1.25; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover.pbMeasurePopoverExplicit .pbPopInline { min-height: 52px; flex-wrap: wrap; } } @media (max-width: 360px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesMobileFullscreen span { display: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadActions button { width: 44px; padding: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadCopy span { max-width: 145px; } } /* Компьютер: в разделе «Ноты» правый инспектор показывает только управление листом и текущим выделением; остальные прежние секции остаются доступны из nav. */ @media (min-width: 900px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspTop, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspMinus, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspPractice, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspGame, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspEditor, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspFooter, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbTbHint { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet { display: flex !important; gap: 13px; padding: 24px 20px; border-bottom: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet > .pbInspHd { margin: 0; color: #1d1d1f; font-size: 22px; font-weight: 750; letter-spacing: -.025em; line-height: 1.15; text-transform: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet > .pbInspDesc { margin: -6px 0 2px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbAdminNotesZoom { display: grid; grid-template-columns: 46px minmax(74px, 1fr) 46px; align-items: center; gap: 2px; width: 100%; min-height: 46px; padding: 3px; box-sizing: border-box; border-radius: 11px; background: #ececf0; font-size: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbAdminNotesZoom button, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbAdminNotesZoom #pbZoomLabel { min-width: 0; min-height: 40px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: #1d1d1f; font: 700 14px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbAdminNotesZoom #pbZoomLabel { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.10); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbAdminNotesLegacyReset { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbAdminNotesQuickRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbAdminNotesQuickRow button { min-width: 0; min-height: 44px; margin: 0; padding: 9px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(0,0,0,.10); border-radius: 10px; background: #fff; color: #3a3a3c; font-size: 12px; font-weight: 650; line-height: 1.2; text-align: center; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbAdminNotesQuickRow button:disabled { opacity: .38; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopBar { display: flex !important; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin: 1px 0 0; padding: 13px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.08); border-radius: 13px; background: #f7f7f9; color: #1d1d1f; box-shadow: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopHint, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopInfo { display: block; width: 100%; min-width: 0; color: #3a3a3c; font-size: 12.5px; font-weight: 600; line-height: 1.4; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopBar button { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 9px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; box-sizing: border-box; white-space: normal; font-size: 12.5px; font-weight: 700; line-height: 1.2; animation: none; box-shadow: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongOpenEdit { border: 0; background: var(--accent); color: #fff; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongOpenPractice { border: 0; background: #2f8f63; color: #fff; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongMeasureActions { border: 1px solid rgba(0,113,227,.18); background: rgba(0,113,227,.08); color: var(--accent); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopClear { border: 1px solid rgba(0,0,0,.10); background: #fff; color: #6e6e73; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongMakeRow { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingLoopBar { display: none !important; } } /* Тёмная тема новой оболочки. */ body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead { border-color: rgba(255,255,255,.11); background: rgba(28,28,30,.97); box-shadow: 0 8px 28px rgba(0,0,0,.30); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadCopy strong, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesMobileZoom button { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadCopy span, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbToolbar .pbInspDesc { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesHeadActions button, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead .pbAdminNotesMobileZoom, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminNotesHead #pbAdminNotesMobileZoomLabel, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminNotesQuickRow button { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbMeasureActionsBackdrop { background: rgba(0,0,0,.52); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover.pbMeasurePopoverExplicit .pbPopTitle { background: rgba(28,28,30,.96); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover .pbPopClose { color: #d1d1d6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover .pbPopClose:hover { background: #3a3a3c; color: #fff; } @media (min-width: 900px) { body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet > .pbInspHd { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbAdminNotesZoom, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopBar { border-color: rgba(255,255,255,.10); background: #242426; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbAdminNotesZoom button, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbAdminNotesZoom #pbZoomLabel, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopHint, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopInfo { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbAdminNotesZoom #pbZoomLabel, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopClear { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } } @media (min-width: 900px) { body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbStudentThemeSwitch { order: 10; position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 96px; height: 57px; padding: 5px 2px 4px; box-sizing: border-box; flex-direction: column; justify-content: center; gap: 5px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; z-index: auto; cursor: pointer; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbStudentThemeSwitch:hover { background: #f1f1f3; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbStudentThemeSwitch .pbThemeLabel { display: block; color: inherit; font: 500 10px/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbSongTools #pbStudentThemeSwitch:hover { background: #2c2c2e; } body.pb-practice #pbPractice .pbPracMinusVolume { grid-template-columns: auto minmax(90px, 220px) auto; justify-content: start; overflow: hidden; box-sizing: border-box; } body.pb-practice #pbPractice .pbPracMinusVolume input[type="range"] { width: 100%; max-width: 220px; min-width: 0; } } /* В тёмной теме переключатель не должен выглядеть отдельной белой карточкой. */ body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentThemeSwitch { border-color: rgba(255,255,255,.12); background: rgba(28,28,30,.92); color: #a1a1a6; box-shadow: none; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbStudentThemeSwitch:hover { background: rgba(44,44,46,.96); } /* Timeline минусовки остаётся связан с тем же калиброванным циклом, что и курсор нот. */ body.pb-practice #pbPractice .pbPracTimeline { min-width: 0; } body.pb-practice #pbPractice .pbPracTimelineCopy { display: flex; min-width: 0; flex-direction: column; gap: 3px; } body.pb-practice #pbPractice .pbPracTimelineCopy b { color: #111827; font: 800 12px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.pb-practice #pbPractice .pbPracTimelineCopy span { color: #687386; font: 600 10px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.pb-practice #pbPractice .pbPracTimeline .pbPracSeekWrap { display: flex; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTimeline .pbPracWaveBars { display: flex !important; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTimeline .pbPracWaveSeek { height: 38px; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 7px; background: #f2f5f9; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTimeline .pbPracWaveSeek input[type=range], body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTimeline .pbPracWaveSeek input[type=range]::-webkit-slider-runnable-track, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTimeline .pbPracWaveSeek input[type=range]::-moz-range-track { height: 38px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTimeline .pbPracWaveSeek input[type=range]::-webkit-slider-thumb { margin-top: 11px; } /* Базовая высота карточки для компьютера и служебных режимов. В мобильном режиме ниже она уточняется по числу нотных строк. */ body.pb-practice #pbPractice .pbPracFrame { height: clamp(400px, 58vh, 560px) !important; } @media (max-width: 600px) { body.pb-practice #pbPractice .pbPracFrame { height: clamp(360px, 61dvh, 520px) !important; } } /* Десктоп: визуализация припаркована справа внутри нижней панели минусовки. */ @media (min-width: 900px) { body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracBody { padding-bottom: 356px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinus { display: grid !important; grid-template-columns: 54px minmax(145px, 190px) minmax(300px, 1fr) minmax(390px, 470px); grid-template-rows: 32px 48px 54px 38px 38px; align-items: center; gap: 10px 14px; min-height: 322px; padding: 14px 18px; } body.pb-practice #pbPractice .pbPracMinusHead { grid-column: 1 / 4; grid-row: 1; } body.pb-practice #pbPractice .pbPracMinusHead h2 { font-size: 17px; } body.pb-practice #pbPractice .pbPracMinusHead span { height: 24px; padding: 0 10px; font-size: 11px; } body.pb-practice #pbPractice .pbPracMinusPlay { grid-column: 1; grid-row: 2; } body.pb-practice #pbPractice .pbPracMinusMeta { grid-column: 2; grid-row: 2; min-width: 0; width: auto; align-self: center; } body.pb-practice #pbPractice .pbPracTrackSeg { grid-column: 3; grid-row: 2; width: 100%; } body.pb-practice #pbPractice .pbPracTimeline { grid-column: 1 / 4; grid-row: 3; display: grid; grid-template-columns: minmax(150px, 205px) minmax(0, 1fr); align-items: center; gap: 14px; } body.pb-practice #pbPractice .pbPracCursorOffset { grid-column: 1 / 3; grid-row: 4; display: grid; grid-template-columns: auto minmax(70px, 1fr) auto 30px; align-items: center; width: 100%; min-width: 0; margin: 0; gap: 8px; } body.pb-practice #pbPractice .pbPracCursorOffset input[type="range"] { width: 100%; min-width: 70px; } body.pb-practice #pbPractice .pbPracHelperSound { grid-column: 3; grid-row: 4; justify-self: start; align-self: center; height: 36px; padding: 0 13px; border-radius: 8px; } body.pb-practice #pbPractice .pbPracMinusSpeed, body.pb-practice #pbPractice .pbPracMinusVolume { grid-row: 5; display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; width: 100%; min-width: 0; margin: 0; gap: 10px; } body.pb-practice #pbPractice .pbPracMinusSpeed { grid-column: 1 / 3; } body.pb-practice #pbPractice .pbPracMinusVolume { grid-column: 3; grid-template-columns: auto minmax(100px, 160px) auto; justify-self: start; width: auto; max-width: 100%; } body.pb-practice #pbPractice .pbPracMinusSpeed input[type="range"], body.pb-practice #pbPractice .pbPracMinusVolume input[type="range"] { width: 100%; min-width: 80px; max-width: none; } body.pb-practice #pbPractice .pbPracMinusVolume input[type="range"] { width: 160px; max-width: 160px; } body.pb-practice #pbPractice .pbPracMinusSpeed > span:last-child, body.pb-practice #pbPractice .pbPracMinusVolume > span:last-child { min-width: 34px; text-align: right; } body.pb-practice #pbPractice .pbPracVizDock { grid-column: 4; grid-row: 1 / 6; align-self: stretch; min-width: 0; min-height: 288px; } body.pb-practice #pbPractice .pbPracViz.pb-docked { position: relative; left: auto; top: auto; z-index: 1; width: 100%; height: 100%; min-height: 288px; transform: none; border-radius: 10px; box-shadow: 0 5px 18px rgba(0,0,0,.22); } body.pb-practice #pbPractice .pbPracVizDock.pb-viz-collapsed { align-self: start; min-height: 42px; } body.pb-practice #pbPractice .pbPracViz.pb-docked.pb-collapsed { align-self: start; height: 42px; min-height: 42px; } body.pb-practice #pbPractice .pbPracViz.pb-docked .pbPracVizResize { display: none; } body.pb-practice #pbPractice .pbPracViz:not(.pb-docked) { /* Свободное окно остаётся доступным поверх минусовки и оболочки приложения. */ z-index: 4800; } } /* Узкий компьютер/планшет в альбомной ориентации: четыре колонки должны помещаться справа от бокового меню, не обрезая установку. */ @media (min-width: 900px) and (max-width: 1179px) { body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinus { grid-template-columns: 54px minmax(118px, 160px) minmax(240px, 1fr) minmax(260px, 340px); gap: 10px; padding: 12px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTrackSeg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTrackBtn { min-width: 0; padding-right: 5px; padding-left: 5px; font-size: 12px; line-height: 1.05; white-space: normal; } } /* Общий доступ к теме без авторизации: переключатель всегда в верхней панели песни. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch { display: inline-flex !important; position: fixed; left: auto; right: 160px; top: 16px; bottom: auto; width: 76px; height: 40px; padding: 0 8px; flex-direction: row; gap: 6px; border: 1px solid rgba(0,0,0,.10); border-radius: 9px; background: rgba(255,255,255,.94); z-index: 4750; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch .pbThemeLabel { display: block; font: 600 10px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; } @media (max-width: 899px) { body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch { right: 12px; top: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch .pbThemeLabel { display: none; } } /* Экран отработки продолжает оболочку приложения: навигация остаётся на месте. */ @media (min-width: 900px) { body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice { left: var(--pbStudentRailW); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #TopNav { z-index: 4700; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightTitle, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools .pbSongZoom, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentSheetActions { display: none !important; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch { z-index: 4702; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTopbar { display: none; } } /* Сохранённая тёмная тема распространяется на весь внешний экран отработки. */ body.pb-practice.pb-student-dark #pbPractice { color-scheme: dark; background: #0d0d0f; color: #f5f5f7; } body.pb-student-dark #pbLoading { background: #0d0d0f; } body.pb-student-dark #pbLoading .pbLoadingBox { border: 1px solid rgba(255,255,255,.10); background: #1c1c1e; color: #f5f5f7; box-shadow: 0 16px 44px rgba(0,0,0,.42); } body.pb-student-dark #pbLoading .pbLoadingSpin { border-color: rgba(255,255,255,.16); border-top-color: #0a84ff; } body.pb-student-dark #pbLoading .pbLoadingMsg { color: #f5f5f7; } body.pb-practice.pb-student-dark #pbPractice .pbPracLoading { background: #0d0d0f; color: #f5f5f7; } body.pb-practice.pb-student-dark #pbPractice .pbPracHero, body.pb-practice.pb-student-dark #pbPractice .pbPracBody { color: #f5f5f7; } body.pb-practice.pb-student-dark #pbPractice .pbPracBack, body.pb-practice.pb-student-dark #pbPractice .pbPracHeroActions button { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; box-shadow: none; } body.pb-practice.pb-student-dark #pbPractice .pbPracBack:hover, body.pb-practice.pb-student-dark #pbPractice .pbPracHeroActions button:hover { background: #3a3a3c; } body.pb-practice.pb-student-dark #pbPractice .pbPracTitleMain { color: #f5f5f7; } body.pb-practice.pb-student-dark #pbPractice .pbPracTitleMeta { color: #a1a1a6; } body.pb-practice.pb-student-dark #pbPractice .pbPracFlow, body.pb-practice.pb-student-dark #pbPractice .pbPracStep, body.pb-practice.pb-student-dark #pbPractice .pbPracStep:not(:last-child)::after { border-color: rgba(255,255,255,.09); background: #1c1c1e; } body.pb-practice.pb-student-dark #pbPractice .pbPracStep b { color: #f5f5f7; } body.pb-practice.pb-student-dark #pbPractice .pbPracStep small { color: #a1a1a6; } body.pb-practice.pb-student-dark #pbPractice .pbPracStep.pb-active b { color: #64d2ff; } body.pb-practice.pb-student-dark #pbPractice .pbPracStep.pb-accent b { color: #ff9f0a; } body.pb-practice.pb-student-dark #pbPractice .pbPracCard, body.pb-practice.pb-student-dark #pbPractice .pbPracPlan, body.pb-practice.pb-student-dark #pbPractice .pbPracMinus { border-color: rgba(255,255,255,.10); background: #1c1c1e; color: #f5f5f7; box-shadow: 0 10px 28px rgba(0,0,0,.24); } body.pb-practice.pb-student-dark #pbPractice .pbPracCardHd, body.pb-practice.pb-student-dark #pbPractice .pbPracPlan h3, body.pb-practice.pb-student-dark #pbPractice .pbPracMinusHead h2, body.pb-practice.pb-student-dark #pbPractice .pbPracVizTitle h2 { color: #f5f5f7; } body.pb-practice.pb-student-dark #pbPractice .pbPracCardHd small, body.pb-practice.pb-student-dark #pbPractice .pbPracMinusSub { color: #a1a1a6; } body.pb-practice.pb-student-dark #pbPractice .pbPracFrameWrap, body.pb-practice.pb-student-dark #pbPractice .pbPracFrame { background: #111114; } body.pb-practice.pb-student-dark #pbPractice .pbPracMinusHead span, body.pb-practice.pb-student-dark #pbPractice .pbPracVizTitle span, body.pb-practice.pb-student-dark #pbPractice .pbPracHelperSound, body.pb-practice.pb-student-dark #pbPractice .pbPracCursorOffset, body.pb-practice.pb-student-dark #pbPractice .pbPracStepGhost { border-color: rgba(255,255,255,.10); background: #2c2c2e; color: #d1d1d6; } body.pb-practice.pb-student-dark #pbPractice .pbPracCursorOffsetLbl, body.pb-practice.pb-student-dark #pbPractice .pbPracTime, body.pb-practice.pb-student-dark #pbPractice .pbPracDrumMix, body.pb-practice.pb-student-dark #pbPractice .pbPracDrumVolume, body.pb-practice.pb-student-dark #pbPractice .pbPracMinusSpeed, body.pb-practice.pb-student-dark #pbPractice .pbPracMinusVolume { color: #a1a1a6; } body.pb-practice.pb-student-dark #pbPractice .pbPracDrumPreset select, body.pb-practice.pb-student-dark #pbPractice .pbPracMasterPreset select { color-scheme: dark; border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } body.pb-practice.pb-student-dark #pbPractice .pbPracCursorOffsetReset { background: #48484a; color: #f5f5f7; box-shadow: none; } body.pb-practice.pb-student-dark #pbPractice .pbPracTrackSeg, body.pb-practice.pb-student-dark #pbPractice .pbPracWaveSeek { border-color: rgba(255,255,255,.10); background: #2c2c2e; } body.pb-practice.pb-student-dark #pbPractice .pbPracTrackBtn { color: #d1d1d6; } body.pb-practice.pb-student-dark #pbPractice .pbPracTrackBtn.pbTrackOn, body.pb-practice.pb-student-dark #pbPractice .pbPracTrackBtn.pbSegOn { background: #48484a; color: #64d2ff; box-shadow: 0 1px 3px rgba(0,0,0,.35); } body.pb-practice.pb-student-dark #pbPractice .pbPracWaveBars i { background: #636366; } body.pb-practice.pb-student-dark #pbPractice .pbPracWaveBarsPlayed i { background: #0a84ff; } body.pb-practice.pb-student-dark #pbPractice #pbPracMinusSpeedLbl, body.pb-practice.pb-student-dark #pbPractice #pbPracMinusVolumeLbl, body.pb-practice.pb-student-dark #pbPractice #pbPracDrumVolumeLbl { color: #f5f5f7; } body.pb-practice.pb-student-dark #pbPractice .pbPracPlanTop strong, body.pb-practice.pb-student-dark #pbPractice .pbPracTask { border-color: rgba(255,255,255,.10); background: #2c2c2e; color: #f5f5f7; } body.pb-practice.pb-student-dark #pbPractice .pbPracPlanBar { background: #3a3a3c; } body.pb-practice.pb-student-dark #pbPractice .pbPracAdvice { border-color: rgba(10,132,255,.30); background: rgba(10,132,255,.12); color: #64d2ff; } /* Мобильная оболочка приложения на странице песни и в отработке. */ #pbMobileAppNav { display: none; } @media (max-width: 899px) { body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4680; height: calc(62px + env(safe-area-inset-bottom)); padding: 5px 7px env(safe-area-inset-bottom); box-sizing: border-box; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(0,0,0,.09); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav a, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppMinusSettings { min-width: 0; padding: 3px 2px; border-radius: 9px; color: #86868b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 600 clamp(8.5px, 2.45vw, 10px)/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; text-align: center; text-decoration: none; white-space: nowrap; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppNavIcon { font-size: 18px; line-height: 1; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppProfileIcon { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 50% 33%, currentColor 0 4px, transparent 4.5px), radial-gradient(ellipse at 50% 100%, currentColor 0 9px, transparent 9.5px); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppNavActive { color: #0a84ff; background: rgba(10,132,255,.10); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppMinusAction { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppMinusPlay { position: absolute; left: 50%; top: -19px; transform: translateX(-50%); z-index: 2; width: 48px; height: 48px; padding: 0; border: 4px solid rgba(255,255,255,.96); border-radius: 50%; background: #0a84ff; color: #fff; box-shadow: 0 7px 18px rgba(10,132,255,.34); display: flex; align-items: center; justify-content: center; cursor: pointer; font: 800 17px/1 -apple-system, system-ui, sans-serif; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppPauseIcon { display: none; font-size: 15px; letter-spacing: -2px; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-playing #pbMobileAppNav .pbAppMinusPlay { background: #b03a2e; box-shadow: 0 7px 18px rgba(176,58,46,.32); } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-playing #pbMobileAppNav .pbAppPlayIcon { display: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-playing #pbMobileAppNav .pbAppPauseIcon { display: inline; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppMinusSettings { margin: 0; border: 0; background: transparent; cursor: pointer; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppSettingsLabel { max-width: 100%; line-height: 1.05; text-align: center; white-space: normal; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbMobileAppNav .pbAppMinusAction { opacity: 1; } body.pb-song-mode.pb-skin-light:not(.pb-admin):not(.pb-student-minus-visible) #pbMobileAppNav .pbAppMinusAction { opacity: .42; pointer-events: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #TopNav { grid-template-columns: clamp(92px, 28vw, 110px) minmax(0, 1fr) 40px 40px; grid-template-rows: 44px; height: 64px; min-height: 64px; padding: 10px 8px 10px 12px; gap: 0 5px; box-sizing: border-box; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightBrand { grid-column: 1; grid-row: 1; justify-self: start; width: 100%; height: 34px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) .pbBrandLogo { width: 100%; max-width: 110px; height: 34px; object-fit: contain; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightTitle { grid-column: 2; grid-row: 1; width: 100%; height: 44px; padding: 0 3px; align-items: flex-start; justify-content: center; text-align: left; } body.pb-song-mode.pb-skin-light:not(.pb-admin) .pbLightTitleMain { justify-content: flex-start; max-height: 34px; font-size: 10.5px; line-height: 1.12; white-space: normal; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightTitleText { display: -webkit-box; max-width: 100%; overflow: hidden; white-space: normal; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools { position: static; grid-column: 3; grid-row: 1; width: 40px; height: 40px; padding: 0; display: flex !important; align-items: center; justify-content: center; overflow: visible; background: transparent; border: 0; box-shadow: none; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools > * { display: none !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #favoriteTopButton { display: inline-flex !important; width: 40px; height: 40px; padding: 0; border-radius: 10px; align-items: center; justify-content: center; font-size: 18px; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #upperRight { grid-column: 4; grid-row: 1; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #burgerDropdown { top: 66px !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #midiPlayer { display: none !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #RightHandContent, body.pb-song-mode.pb-skin-light.pb-mobile-notes-collapsed:not(.pb-admin) #RightHandContent { top: 64px; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus { bottom: calc(62px + env(safe-area-inset-bottom)); padding-bottom: 10px; border-radius: 14px 14px 0 0; } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #RightHandContent { padding-bottom: calc(306px + env(safe-area-inset-bottom)); } body.pb-song-mode.pb-skin-light:not(.pb-admin).pb-student-minus-visible #pbStudentMinus .pbStuSpeed input[type="range"] { display: block !important; flex: 1 1 150px; width: auto; min-width: 120px; } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #RightHandContent { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin).pb-student-minus-visible #pbStudentMinus { display: none !important; } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbFloatingLoopBar { bottom: calc(124px + env(safe-area-inset-bottom)); } body.pb-song-mode.pb-skin-light.pb-mobile-minus-collapsed:not(.pb-admin) #pbFloatingLoopBar { bottom: calc(70px + env(safe-area-inset-bottom)); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTopbar, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracFlow, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracCardHd { display: none; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracBody { padding: 10px 2px calc(82px + env(safe-area-inset-bottom)); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracNotesCard { padding-left: 2px; padding-right: 2px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracHero { min-height: 42px; margin: 0 0 6px; padding: 0 2px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracBack { width: 40px; height: 40px; padding: 0; border-radius: 12px; font-size: 0; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracBack .pbPracChev { margin: 0; font-size: 28px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTitle { width: auto; text-align: left; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTitleMain { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTitleMeta { display: none !important; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracCard { margin-top: 0; padding: 4px; border-radius: 12px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracFrameWrap { margin-top: 0; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracFrame { height: var(--pb-practice-frame-height, clamp(360px, 61dvh, 520px)) !important; border-radius: 9px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline { position: relative; left: auto; top: auto; z-index: 1; width: 100%; height: clamp(132px, 22dvh, 170px); min-height: 132px; margin: 8px 0 0; transform: none; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.22); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline .pbPracVizTitle { flex: 0 0 36px; width: 100%; height: 36px; min-height: 36px; padding: 0 8px 0 11px; flex-direction: row; align-items: center; gap: 7px; cursor: default; touch-action: auto; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline .pbPracVizCollapsedLabel { display: block; flex: 1 1 auto; min-width: 0; height: auto; padding: 0; overflow: hidden; border-radius: 0; background: transparent; color: #f5f5f7; font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-overflow: ellipsis; white-space: nowrap; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline .pbPracVizGrip, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline .pbPracVizTitleHint, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline .pbPracVizCollapse, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline .pbPracVizReset, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline .pbPracVizResize { display: none; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline .pbPracVizSettings { display: inline-flex; margin-left: auto; align-items: center; justify-content: center; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline .pbPracVizStage { min-height: 0; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline .pbPracVizPhotoKit { left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transform: none; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinus { display: none !important; position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: calc(70px + env(safe-area-inset-bottom)) !important; z-index: 4670; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px; width: min(430px, calc(100vw - 16px)); min-height: 0; max-height: min(390px, calc(100dvh - 148px)); margin: 0; padding: 12px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(10,132,255,.18); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 18px 48px rgba(15,23,42,.22), 0 2px 8px rgba(15,23,42,.10); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); transform: translateX(-50%); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinus.pb-prac-available { display: none !important; } body.pb-practice.pb-practice-player-open.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinus.pb-prac-available { display: grid !important; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusHead { display: flex; grid-column: 1 / -1; grid-row: 1; align-items: center; width: 100%; min-width: 0; min-height: 30px; padding-right: 38px; box-sizing: border-box; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusHead h2 { margin: 0; color: #111827; font-size: 0; line-height: 1.15; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusHead h2::after { content: "Настройки минусовки"; font-size: 16px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusHead span { display: none; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusPlay { display: none !important; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusMeta { grid-column: 1 / -1; grid-row: 2; width: auto; min-width: 0; padding: 0; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusName { color: #0a84ff; font-size: 15px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusSub { display: block; margin-top: 3px; color: #687386; font-size: 11px; line-height: 1.3; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTrackSeg { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; width: 100%; height: auto; min-height: 54px; padding: 4px; border-radius: 12px; background: #f2f2f7; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTrackBtn { display: flex; height: 46px; min-width: 0; padding: 0 4px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 9px; color: #3d4755; font-size: 11px; line-height: 1.05; white-space: normal; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTrackBtn b { display: block; font-weight: 800; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTrackBtn small { display: block; color: #7a8492; font-size: 9px; font-weight: 600; line-height: 1.05; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTrackBtn.pbTrackOn, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTrackBtn.pbSegOn { background: #0a84ff; color: #fff; box-shadow: 0 4px 12px rgba(10,132,255,.24); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTrackBtn.pbTrackOn small, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTrackBtn.pbSegOn small { color: rgba(255,255,255,.82); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusSpeed, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusVolume { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 30px; align-items: center; gap: 3px 6px; width: 100%; min-width: 0; min-height: 0; margin: 0; padding: 8px 9px 6px; box-sizing: border-box; border-radius: 10px; background: #f5f5f7; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTimeline { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; width: 100%; padding: 8px 9px; box-sizing: border-box; border-radius: 10px; background: #f5f5f7; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTimelineCopy span { font-size: 9px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracTimeline .pbPracSeekWrap { display: flex !important; width: 100%; min-width: 0; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusSpeed { grid-column: 1; grid-row: 5; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusVolume { grid-column: 2; grid-row: 5; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusSpeed .pbPracControlName, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusVolume .pbPracControlName { grid-column: 1; grid-row: 1; color: #5f6978; font-size: 10px; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusSpeed input[type="range"], body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusVolume input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; max-width: none; height: 30px; margin: 0; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice #pbPracMinusSpeedLbl, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice #pbPracMinusVolumeLbl { grid-column: 2; grid-row: 1; min-width: 0; color: #1d1d1f; font-size: 10px; text-align: right; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusBadge, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracHelperSound, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracCursorOffset, body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracVizDock { display: none !important; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinusClose { position: absolute; right: 8px; top: 8px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #f2f2f7; color: #3a3a3c; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; font: 600 22px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracStep.pb-accent b { color: #0a84ff; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracStep.pb-accent .pbPracStepNo { background: #0a84ff; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracMinusHead span { background: transparent; color: #a1a1a6; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracMinus { border-color: rgba(255,255,255,.11); background: #1c1c1e; color: #f5f5f7; box-shadow: 0 8px 24px rgba(0,0,0,.26); } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracMinusClose { background: #2c2c2e; color: #f5f5f7; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracMinusHead h2 { color: #f5f5f7; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracMinusName { color: #64d2ff; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracMinusSub { color: #a1a1a6; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracTrackSeg { border-color: rgba(255,255,255,.09); background: #2c2c2e; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracTrackBtn { color: #d1d1d6; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracTrackBtn small { color: #98989d; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracMinusSpeed, body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracMinusVolume, body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracTimeline { background: #2c2c2e; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracTimelineCopy b { color: #f5f5f7; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracTimelineCopy span { color: #a1a1a6; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracTrackBtn.pbTrackOn, body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracTrackBtn.pbSegOn { background: #0a84ff; color: #fff; } body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracTrackBtn.pbTrackOn small, body.pb-practice.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbPractice .pbPracTrackBtn.pbSegOn small { color: rgba(255,255,255,.82); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav { grid-template-columns: repeat(5, minmax(0, 1fr)); } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppMinusAction { display: flex; } body.pb-practice.pb-practice-player-open.pb-song-mode.pb-skin-light:not(.pb-admin) #pbMobileAppNav .pbAppMinusSettings { background: rgba(10,132,255,.12); color: #0a84ff; } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbMobileAppNav { border-color: rgba(255,255,255,.10); background: rgba(21,21,23,.94); } body.pb-song-mode.pb-skin-light.pb-student-dark:not(.pb-admin) #pbMobileAppNav .pbAppMinusPlay { border-color: rgba(21,21,23,.98); } body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch { display: none !important; } } body.pb-practice #pbPractice .pbPracMinus:not(.pb-prac-available) { display: none !important; } @media (max-width: 899px) and (orientation: landscape) { body.pb-practice.pb-practice-player-open.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracMinus.pb-prac-available { left: 10px !important; width: min(360px, calc(50vw - 18px)); max-height: calc(100dvh - 88px); transform: none; } body.pb-practice.pb-song-mode.pb-skin-light:not(.pb-admin) #pbPractice .pbPracViz.pb-mobile-inline.pb-mobile-landscape-docked { position: fixed; left: auto; right: 12px; top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 4550; width: clamp(300px, 42vw, 380px); height: clamp(132px, 38dvh, 170px); min-height: 132px; margin: 0; box-shadow: 0 16px 44px rgba(0,0,0,.34), 0 3px 12px rgba(0,0,0,.22); } } @media (max-width: 899px) { body.pb-practice.pb-student-dark #pbPractice .pbPracTopbar { border-bottom: 1px solid rgba(255,255,255,.08); background: #151517; } body.pb-practice.pb-student-dark #pbPractice .pbPracBrand img { filter: invert(1) hue-rotate(180deg); } } /* ============================================================================ АДМИН-РЕДАКТОР · ЭТАП 1 — MOBILE FIRST КАРКАС НАВИГАЦИИ Всё ограничено дополнительным kill-switch .pb-admin-workspace-v2. Удаление этого класса мгновенно возвращает прежнюю раскладку без изменения логики. ============================================================================ */ #pbAdminWorkspaceNav, #pbAdminWorkspaceBack, #pbAdminWorkspaceToolsClose, #burgerDropdown #pbAdminWorkspaceToolsItem, #burgerDropdown #pbAdminWorkspaceConstructorItem { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 { --pb-admin-nav-h: 68px; --pb-admin-rail-w: 88px; } /* Компактная шапка: назад, название песни, публичный вид, сохранение, меню. */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #TopNav { overflow: visible; gap: 10px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbLightBrand { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceBack { display: inline-flex !important; flex: 0 0 auto; min-width: 82px; height: 40px; padding: 0 13px; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(0,0,0,.10); border-radius: 10px; background: #fff; color: #3a3a3c; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; cursor: pointer; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceBack:hover { background: #f2f2f5; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbLightTitle { flex: 1 1 auto; max-width: none; min-width: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbSongClose { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #burgerDropdown #pbAdminWorkspaceToolsItem, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #burgerDropdown #pbAdminWorkspaceConstructorItem { display: flex !important; } /* Все прежние инструменты листа остаются доступны из пункта «Инструменты листа». */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbSongTools { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools { display: grid !important; position: fixed; top: 72px; right: 14px; z-index: 6600; width: min(370px, calc(100vw - 28px)); max-height: calc(100dvh - 86px); overflow-y: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 8px; padding: 52px 12px 12px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.10); border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: 0 22px 54px rgba(0,0,0,.20), 0 3px 12px rgba(0,0,0,.10); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools::before { content: "Инструменты листа"; position: absolute; top: 18px; left: 16px; color: #1d1d1f; font: 700 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbAdminWorkspaceToolsClose { display: inline-flex !important; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: #f0f0f3; color: #6e6e73; cursor: pointer; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools > .pbSongTool { display: inline-flex !important; width: auto !important; min-width: 0; min-height: 48px; height: auto; padding: 8px 6px; flex-direction: column; justify-content: center; gap: 5px; text-align: center; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools .pbSongToolLbl { display: inline !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 1.15; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools .pbSongZoom, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools #pbWholeSongPracticeTop { display: inline-flex !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools .pbSongZoom { grid-column: 1 / -1; width: 100%; height: 44px; box-sizing: border-box; justify-content: center; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools #pbStudentThemeSwitch { display: inline-flex !important; position: static !important; grid-column: 1 / -1; width: 100% !important; height: 44px !important; padding: 0 12px !important; box-sizing: border-box; flex-direction: row !important; justify-content: center; gap: 8px; border: 1px solid rgba(0,0,0,.10); border-radius: 10px; background: #fff; box-shadow: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools #pbStudentThemeSwitch .pbThemeLabel { display: inline !important; } /* Один nav-компонент: изначально нижняя панель, с 900px — левый rail. */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav:not([hidden]) { display: grid !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: calc(var(--pb-admin-nav-h) + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px); grid-template-columns: repeat(5, minmax(0, 1fr)); box-sizing: border-box; border-top: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.96); box-shadow: 0 -8px 26px rgba(0,0,0,.08); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button { min-width: 0; min-height: 56px; margin: 4px 2px; padding: 5px 2px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 12px; background: transparent; color: #77777c; font: 600 10.5px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button i { font-size: 19px; line-height: 20px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button:hover { background: rgba(0,113,227,.06); color: #3a3a3c; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button.pbAdminNavActive, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button[aria-current="page"] { background: rgba(0,113,227,.10); color: var(--accent); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button:focus-visible, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceBack:focus-visible, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceToolsClose:focus-visible { outline: 3px solid rgba(0,113,227,.28); outline-offset: -2px; } /* Телефон и планшет: ноты и калибровка занимают рабочую область, остальные пункты открывают прежний инспектор на всю ширину и прокручивают к секции. */ @media (max-width: 899px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #GrooveWriter { width: 100vw; min-width: 0; max-width: 100vw; overflow-x: hidden; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #RightHandContent { padding-right: 0 !important; padding-bottom: calc(244px + var(--pb-admin-nav-h) + env(safe-area-inset-bottom, 0px)); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar { left: 0; right: 0; bottom: calc(var(--pb-admin-nav-h) + env(safe-area-inset-bottom, 0px)); width: 100% !important; height: auto; max-width: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbToolbar { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbLeftPanel { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbLeftPanel { display: block !important; width: 100%; max-width: none; padding: 12px; box-sizing: border-box; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbFloatingLoopBar { bottom: calc(var(--pb-admin-nav-h) + 12px + env(safe-area-inset-bottom, 0px)); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #burgerDropdown { max-height: calc(100dvh - var(--pb-admin-nav-h) - 76px); } } /* Планшетный транспорт: все режимы метронома остаются видимыми без скрытого горизонтального продолжения за краем экрана. */ @media (min-width: 641px) and (max-width: 899px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2::after { content: ""; display: block; width: 100%; height: calc(var(--pb-admin-nav-h) + 16px + env(safe-area-inset-bottom, 0px)); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbStudentMinus { flex-wrap: wrap; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #playerControlsRow1 { gap: 8px; padding-left: 14px; padding-right: 14px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbNotesTransportMeta { min-width: 110px; max-width: 145px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #MIDIPlayTime1.MIDIPlayTime { min-width: 42px; font-size: 17px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .tempoAndProgress { min-width: 110px; flex: 1 1 145px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .tempoRow { gap: 6px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .tempoTextField { width: 48px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .tempoInput { min-width: 50px; max-width: 110px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .tempoLabel, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #metronomeLabel { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbNotesCollapseBtn { min-width: 76px; margin-left: 0; padding: 0 9px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #metronomeContainer { gap: 4px; margin-left: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMetTrack .metronomeButton { padding: 5px 7px; font-size: 11px; } } @media (min-width: 641px) and (max-width: 720px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #playerControlsRow1 { padding-left: 10px; padding-right: 10px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #MIDIPlayTime1.MIDIPlayTime, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .tempoInput { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .tempoAndProgress, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .tempoRow { width: auto; min-width: 48px; flex: 0 0 auto; } } @media (max-width: 640px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbStudentMinus { bottom: calc(var(--pb-admin-nav-h) + env(safe-area-inset-bottom, 0px)); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #TopNav { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: 50px; height: 62px; min-height: 62px; padding: 6px 8px; gap: 0 7px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceBack { grid-column: 1; grid-row: 1; width: 40px; min-width: 40px; height: 40px; padding: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceBack span { display: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbLightTitle { grid-column: 2; grid-row: 1; width: 100%; max-width: none; min-width: 0; padding: 3px 2px; align-items: flex-start; text-align: left; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbLightTitleMain { justify-content: flex-start; font-size: 13px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbLightTitleMain svg { display: none; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbLightTitleMeta { display: block; margin-top: 2px; font-size: 10px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbLightTitleText { max-width: 100%; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #upperRight { grid-column: 3; grid-row: 1; display: flex; gap: 6px; min-width: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbLightSaveBtn { display: inline-flex !important; width: auto; min-width: 82px; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 12px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #burgerMenuToggle { width: 40px; height: 40px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #midiPlayer { top: 62px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #RightHandContent { top: 136px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-mobile-notes-collapsed #RightHandContent { top: 104px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-notes-collapsed #RightHandContent { top: 107px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbToolbar { top: 136px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-mobile-notes-collapsed #pbToolbar { top: 104px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-notes-collapsed #pbToolbar { top: 107px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #burgerDropdown { top: 62px !important; right: 8px !important; max-height: calc(100dvh - var(--pb-admin-nav-h) - 70px); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools { top: auto; left: 8px; right: 8px; bottom: calc(var(--pb-admin-nav-h) + env(safe-area-inset-bottom, 0px) + 8px); width: auto; max-height: calc(100dvh - var(--pb-admin-nav-h) - 78px); border-radius: 16px; } } @media (max-width: 360px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbLightSaveBtn { width: 40px; min-width: 40px; padding: 0; font-size: 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbLightSaveBtn::after { content: "✓"; font-size: 17px; line-height: 1; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button { gap: 3px; font-size: 8.5px; letter-spacing: -.01em; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button span { white-space: nowrap; } } @media (min-width: 900px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav:not([hidden]) { top: 140px; right: auto; bottom: 0; width: var(--pb-admin-rail-w); height: auto; padding: 8px 6px; grid-template-columns: 1fr; grid-auto-rows: minmax(76px, auto); align-content: start; border-top: 0; border-right: 1px solid rgba(0,0,0,.10); box-shadow: 8px 0 24px rgba(0,0,0,.045); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button { min-height: 72px; margin: 2px 0; font-size: 11px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #RightHandContent { padding-left: var(--pb-admin-rail-w); } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-notes-collapsed #pbAdminWorkspaceNav:not([hidden]) { top: 108px; } } @media (min-width: 900px) and (max-width: 980px) and (max-height: 520px) and (orientation: landscape) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav:not([hidden]) { top: 114px; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-admin-notes-collapsed #pbAdminWorkspaceNav:not([hidden]), body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2.pb-mobile-notes-collapsed #pbAdminWorkspaceNav:not([hidden]) { top: 92px; } } /* Тёмная админ-тема: без белой вспышки у новой панели и листа инструментов. */ body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav:not([hidden]) { border-color: rgba(255,255,255,.10); background: rgba(21,21,23,.96); box-shadow: 0 -8px 28px rgba(0,0,0,.28); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button { color: #a1a1a6; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button:hover { background: rgba(10,132,255,.10); color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button.pbAdminNavActive, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceNav button[aria-current="page"] { background: rgba(10,132,255,.16); color: #64d2ff; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2 #pbAdminWorkspaceBack { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools { border-color: rgba(255,255,255,.12); background: rgba(28,28,30,.98) !important; box-shadow: 0 22px 54px rgba(0,0,0,.48), 0 3px 12px rgba(0,0,0,.28); } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools::before { color: #f5f5f7; } body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbAdminWorkspaceToolsClose, body.pb-song-mode.pb-skin-light.pb-student-dark.pb-admin.pb-admin-workspace-v2.pb-admin-tools-open #pbSongTools #pbStudentThemeSwitch { border-color: rgba(255,255,255,.12); background: #2c2c2e; color: #f5f5f7; } /* Финальный override: мобильный focus-блок выше больше не скрывает тему. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbStudentThemeSwitch { display: inline-flex !important; } @media (min-width: 900px) { body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbSongTools #pbStudentThemeSwitch { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 96px; height: 57px; padding: 5px 2px 4px; flex-direction: column; gap: 5px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; z-index: auto; } } /* Этап 2 · финальные section-specific overrides после каркаса Этапа 1. */ @media (max-width: 899px) { /* GrooveWriter keeps a legacy 800px minimum. On tablets below 800px it created horizontal scrolling. */ body.pb-song-mode.pb-skin-light:not(.pb-admin) #GrooveWriter, body.pb-song-mode.pb-skin-light:not(.pb-admin) #RightHandContent { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } body.pb-song-mode #pbRangePracticeOpen, body.pb-song-mode #pbRangePracticeListen, body.pb-song-mode.pb-skin-light:not(.pb-admin) #pbLightTitle, body.pb-song-mode.pb-skin-light:not(.pb-admin) #favoriteTopButton, body.pb-practice.pb-song-mode.pb-skin-light #pbPractice .pbPracBack, body.pb-practice.pb-song-mode.pb-skin-light #pbPractice .pbPracVizSettings { min-width: 44px !important; min-height: 44px !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbStudentMinus { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #RightHandContent { padding-bottom: calc(var(--pb-admin-nav-h) + 20px + env(safe-area-inset-bottom, 0px)) !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"].pb-student-selection-active #RightHandContent { padding-bottom: calc(var(--pb-admin-nav-h) + 232px + env(safe-area-inset-bottom, 0px)) !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbFloatingPracticeBtn { background: #287a54; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover.pbMeasurePopoverExplicit .pbPopClose { width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: -3px -3px -3px 0; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2 .pbMeasurePopover.pbMeasurePopoverExplicit .pbPopInline button.pbPopApply { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0 10px; } } @media (min-width: 900px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbLeftPanel { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopHint, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopInfo { order: 1; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongOpenEdit { order: 2; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongOpenPractice { order: 3; background: #287a54; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongMeasureActions { order: 4; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="notes"] #pbToolbar .pbInspSheet #pbSongLoopClear { order: 5; } } /* Финальный cascade для этапов 3–6: правила должны идти после каркаса этапов 1–2. */ body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #RightHandContent, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #RightHandContent, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #RightHandContent, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #RightHandContent { padding-right: 0 !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbFloatingLoopBar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbFloatingLoopBar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbFloatingLoopBar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbFloatingLoopBar { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar { display: block !important; position: relative !important; inset: auto !important; width: min(760px, calc(100% - 24px)) !important; height: auto !important; max-height: none !important; margin: 18px auto 32px !important; overflow: visible !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 16px !important; box-shadow: 0 8px 26px rgba(0,0,0,.06) !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar .pbInsp, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar .pbTbHint, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar .pbInsp, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar .pbTbHint, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar .pbInsp, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar .pbTbHint { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar .pbInspMinus, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar .pbInspPractice, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar .pbInspGame, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar .pbInspEditor { display: flex !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbToolbar { display: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbLeftPanel { display: block !important; width: min(980px, calc(100% - 24px)) !important; max-width: none !important; margin: 18px auto 32px !important; padding: 0 !important; } @media (max-width: 899px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar { display: block !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbLeftPanel { display: block !important; } } @media (max-width: 640px) { body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="audio"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="practice"] #pbToolbar, body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="edit"] #pbToolbar { width: 100% !important; margin: 0 !important; border-width: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.pb-song-mode.pb-skin-light.pb-admin.pb-admin-workspace-v2[data-pb-admin-section="calibration"] #pbLeftPanel { width: 100% !important; margin: 0 !important; padding: 0 10px 18px !important; box-sizing: border-box; } }