/* Демо-страница спикера: всё, что видно только в демо (поверх обычной страницы спикера) */
.demo-mode #micMeter, .demo-mode #micMeter2 { --lvl: var(--demo-lvl, 0) !important; }
.demo-mode #levelHint:empty::after { content: 'звук — имитация'; }

/* полоса «Демо-режим» */
.demo-ribbon { position: fixed; left: 0; right: 0; top: 0; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 9px 18px; background: #131A24; color: #E8EDF5; font-size: 13.5px; line-height: 1.3; box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .5); }
.demo-ribbon b { font-weight: 600; white-space: nowrap; }
.demo-ribbon .dr-txt { color: rgba(232, 237, 245, .72); min-width: 0; }
.demo-ribbon .dr-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #06B6D4, #BAB9E0); box-shadow: 0 0 0 4px rgba(6, 182, 212, .2); }
.demo-ribbon .dr-exit { margin-left: auto; color: #A5F3FC; white-space: nowrap; text-decoration: none; border-bottom: 1px solid rgba(165, 243, 252, .4); }
.demo-ribbon.compact { display: none; }
.demo-mode #setup, .demo-mode #boot, .demo-mode #endScreen { padding-top: 58px; }
@media (max-width: 760px) { .demo-ribbon .dr-txt { display: none; } }

/* эфирная: пометки «демо» */
.demo-chip { font-family: var(--label, monospace); font-size: 11px; letter-spacing: .12em; padding: 4px 8px; border-radius: 8px; background: linear-gradient(135deg, #06B6D4, #BAB9E0); color: #0B0C0E; font-weight: 600; flex: none; }
.demo-mode #livePill::after { content: 'демо'; margin-left: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.demo-note { margin-top: 14px; padding: 8px 12px; border-radius: 12px; background: rgba(18, 108, 121, .1); color: #0E5560; font-size: 13.5px; line-height: 1.35; }
.demo-note.sm { margin-top: 8px; padding: 3px 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.onair-ov { flex-direction: column; }
.demo-onair-sub { margin-top: 14px; padding: 6px 14px; border-radius: 99px; background: rgba(19, 26, 36, .78); color: #E8EDF5; font-size: 15px; letter-spacing: .04em; text-align: center; }

/* подготовка: заблокированные поля, печать, вспышка галочки, кнопка входа */
.demo-locked { background-image: repeating-linear-gradient(135deg, rgba(18, 108, 121, .04) 0 8px, transparent 8px 16px) !important; cursor: not-allowed; }
.demo-typing { border-color: #06B6D4 !important; box-shadow: 0 0 0 4px rgba(6, 182, 212, .18) !important; }
.demo-flash { background: rgba(6, 182, 212, .14); border-radius: 10px; transition: background .2s; }
.demo-pulse { animation: demoPulse 1.6s ease-in-out infinite; }
@keyframes demoPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, .55); } 50% { box-shadow: 0 0 0 12px rgba(6, 182, 212, 0); } }
.demo-calltip { margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: #131A24; color: #E8EDF5; font-size: 14px; line-height: 1.4; position: relative; }
.demo-calltip::before { content: ''; position: absolute; left: 28px; top: -6px; width: 12px; height: 12px; background: #131A24; transform: rotate(45deg); }

/* демо-помощник */
.demo-coach { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 300px; padding: 14px 16px 12px; border-radius: 20px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 48px -24px rgba(19, 26, 36, .45); border: 1px solid rgba(19, 26, 36, .08); font-size: 13.5px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .3s, opacity .3s; }
.demo-coach.on { transform: none; opacity: 1; pointer-events: auto; }
.dc-h { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.dc-mark { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #126C79, #06B6D4 40%, #A5F3FC 60%, #BAB9E0); }
.dc-p { margin: 6px 0 8px; color: #636363; line-height: 1.35; }
.dc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dc-list li { display: flex; align-items: center; gap: 8px; color: #959595; }
.dc-list li.run, .dc-list li.ok { color: #131A24; }
.dc-st { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(19, 26, 36, .18); flex: none; position: relative; }
.dc-list li.run .dc-st { border-color: #06B6D4; border-right-color: transparent; animation: dcSpin .8s linear infinite; }
.dc-list li.ok .dc-st { border-color: #126C79; background: #126C79; }
.dc-list li.ok .dc-st::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes dcSpin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .demo-coach { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 10px 12px; } .demo-coach .dc-p { display: none; } .dc-list { grid-template-columns: 1fr 1fr; font-size: 12.5px; } }

/* подсказка при наведении / касании */
.demo-tip { position: fixed; z-index: 9999; padding: 8px 12px; border-radius: 10px; background: #131A24; color: #fff; font-size: 13.5px; line-height: 1.35; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6); pointer-events: none; animation: demoTipIn .12s ease-out; }
@keyframes demoTipIn { from { opacity: 0; transform: translateY(-3px); } }

/* подписи ко всем кнопкам */
.demo-captions { position: fixed; inset: 0; z-index: 9990; background: rgba(10, 14, 20, .52); }
.dcap { position: fixed; padding: 5px 10px; border-radius: 9px; background: #fff; color: #0B0C0E; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55); }
.dcap::before { content: ''; position: absolute; left: var(--ax, 50%); width: 9px; height: 9px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.dcap.down::before { top: -4px; }
.dcap.up::before { bottom: -4px; }
.dcap-ring { position: fixed; border-radius: 12px; box-shadow: 0 0 0 2px #A5F3FC, 0 0 0 6px rgba(165, 243, 252, .25); pointer-events: none; }
.dcap-card { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; gap: 8px; justify-items: center; text-align: center; width: min(360px, calc(100% - 32px)); padding: 18px 20px; border-radius: 20px; background: #131A24; color: #E8EDF5; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.dcap-card b { font-size: 17px; font-weight: 600; }
.dcap-card span { font-size: 14px; color: rgba(232, 237, 245, .75); line-height: 1.4; }

/* кнопки «Как видят зрители» и «?» */
.demo-viewer-btn { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #06B6D4, #BAB9E0) border-box !important; border: 2px solid transparent !important; }
.demo-touch .st-right .demo-viewer-btn .lbl { display: inline !important; }

/* окно «Как видят зрители» */
.demo-viewer { position: fixed; inset: 0; z-index: 9980; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(8, 10, 14, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.demo-viewer.hidden { display: none; }
.dv-card { width: min(1320px, 100%); max-height: 100%; overflow: auto; border-radius: 24px; background: #0F1318; color: #E8EDF5; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
.dv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dv-head .kicker { display: block; color: #A5F3FC; }
.dv-head b { font-weight: 500; font-size: 16px; }
.dv-x { color: #E8EDF5 !important; border-color: rgba(255, 255, 255, .2) !important; background: transparent !important; }
.dv-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; padding: 14px; }
.dv-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 14px 14px 0 0; overflow: hidden; background: #000; }
.dv-screen canvas { width: 100%; height: 100%; display: block; }
.dv-live { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.dv-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #aaa; }
.dv-live.on { background: #FA3D1D; }
.dv-live.on .dot { background: #fff; animation: blink 1.2s infinite; }
.dv-views { position: absolute; right: 12px; top: 12px; padding: 4px 9px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.dv-bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 0 0 14px 14px; background: #1A1F26; font-size: 13px; color: rgba(232, 237, 245, .8); }
.dv-prog { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); position: relative; overflow: hidden; }
.dv-prog i { position: absolute; inset: 0; background: #FA3D1D; }
.dv-hd { font-size: 11px; padding: 2px 6px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; }
.dv-note { margin: 10px 2px 0; font-size: 13px; color: rgba(232, 237, 245, .6); line-height: 1.45; }
.dv-chat { border-radius: 14px; overflow: hidden; background: #ECEEF0; min-height: 360px; }
.dv-chat iframe { width: 100%; height: 100%; border: 0; display: block; min-height: 360px; }
.dv-src { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; }
@media (max-width: 960px) { .dv-body { grid-template-columns: 1fr; } .dv-chat, .dv-chat iframe { min-height: 320px; height: 320px; } .demo-viewer { padding: 8px; align-items: flex-start; } }