/* ---------- лаба целиком: оверлей поверх зала ---------- */
#room-root #lab{ position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: rgba(8, 4, 13, .86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); opacity: 0; transition: opacity .25s; color: var(--ink); }
#room-root #lab.on{ opacity: 1; }
#room-root #lab[hidden]{ display: none; }
#room-root #lab kbd{ font: 10px/1 var(--mono); border: 1px solid var(--line); padding: 2px 4px; color: var(--mute); margin-left: 4px; border-radius: 2px; }
#room-root #lab a{ color: var(--lilac); }
#room-root #lab h3, #room-root #lab h4, #room-root #lab h5{ margin: 0; }
#room-root #lab button, #room-root #lab .btn{ font: 11px/1 var(--mono); color: var(--lilac); background: rgba(16, 8, 26, .78); border: 1px solid var(--violet); padding: 8px 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
#room-root #lab button:hover, #room-root #lab .btn:hover{ color: #fff; border-color: var(--lilac); }
#room-root #lab button.main, #room-root #lab .btn.main{ background: var(--gold); color: #1a0c2b; border-color: var(--gold); }

#room-root .lab-top{ display: flex; align-items: center; gap: 18px; padding: 14px 22px; border-bottom: 1px solid rgba(77, 58, 110, .6); flex: 0 0 auto; }
#room-root .lab-brand{ display: flex; align-items: center; gap: 10px; font: 13px/1 var(--mono); }
#room-root .lab-brand img{ width: 20px; filter: invert(1) drop-shadow(0 0 5px var(--lilac)); }
#room-root .lab-brand b{ font-weight: 400; color: #fff; }
#room-root .lab-brand i{ font-style: normal; color: var(--mute); }
#room-root .lab-tabs{ display: flex; gap: 4px; margin-left: auto; }
#room-root #lab .lab-tabs button.on{ background: var(--lilac); color: #1a0c2b; border-color: var(--lilac); }
#room-root #lab .lab-tabs button.on kbd{ color: #1a0c2b; border-color: #1a0c2b55; }
#room-root .lab-body{ flex: 1 1 auto; overflow: auto; padding: 22px 26px 60px; scroll-behavior: smooth; }
#room-root .lab-body .lead{ max-width: 820px; font: 15px/1.55 var(--sans); color: #e9dcf2; margin: 0 0 18px; }
#room-root .lab-body .dim{ color: var(--mute); font: 11px/1.5 var(--mono); margin-top: 24px; }
#room-root .lsec{ font: 11px/1 var(--mono) !important; letter-spacing: .05em; color: var(--gold); text-transform: lowercase; margin: 30px 0 12px !important; }

#room-root .lab-count{ display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; background: rgba(77, 58, 110, .5); border: 1px solid rgba(77, 58, 110, .5); margin-bottom: 26px; }
#room-root .lab-count div{ background: rgba(12, 6, 20, .92); padding: 14px 14px 12px; font: 11px/1.35 var(--mono); color: var(--mute); }
#room-root .lab-count b{ display: block; font: 600 28px/1.05 var(--sans); color: #fff; margin-bottom: 6px; letter-spacing: -.01em; }

/* встречи */
#room-root .lweek{ margin-bottom: 26px; }
#room-root .lweek h3{ font: 600 17px/1 var(--sans); color: #fff; margin-bottom: 12px !important; display: flex; gap: 12px; align-items: baseline; }
#room-root .lweek h3 i{ font: 11px/1 var(--mono); font-style: normal; color: var(--mute); }
#room-root .lgrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
#room-root .lcard{ cursor: pointer; background: rgba(18, 9, 30, .7); border: 1px solid rgba(77, 58, 110, .55); transition: border-color .15s, transform .15s; }
#room-root .lcard:hover{ border-color: var(--c); transform: translateY(-2px); }
#room-root .lcov{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #120a1e; }
#room-root .lcov img{ width: 100%; height: 100%; object-fit: cover; display: block; }
#room-root .lcov .nocov{ position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 12px/1.3 var(--mono); color: var(--rose); background: radial-gradient(circle at 50% 45%, #3a1630, #120a1e 70%); }
#room-root .lcov .nocov b{ font: 600 34px/1 var(--sans); color: #fff; }
#room-root .lcov span{ position: absolute; font: 10px/1 var(--mono); padding: 4px 6px; background: rgba(8, 4, 13, .82); color: #fff; }
#room-root .ldate{ left: 6px; top: 6px; }
#room-root .lkind{ right: 6px; top: 6px; color: var(--c) !important; }
#room-root .ldur{ left: 6px; bottom: 6px; color: var(--mute) !important; }
#room-root .lplay{ right: 6px; bottom: 6px; background: var(--c) !important; color: #1a0c2b !important; opacity: 0; transition: opacity .15s; }
#room-root .lcard:hover .lplay{ opacity: 1; }
#room-root .lcard h4{ font: 600 14px/1.3 var(--sans); color: #fff; padding: 10px 11px 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#room-root .lcard.demo{ cursor: default; border-style: dashed; }
#room-root .lspk{ display: flex; align-items: center; padding: 0 11px 11px 11px; font: 11px/1.3 var(--mono); color: var(--c); }
#room-root .lspk span{ margin-left: 8px; }
#room-root .lspk .av + .av{ margin-left: -8px; }
#room-root .av{ width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1.5px solid #120a1e; box-shadow: 0 0 0 1px var(--c, var(--gold)); flex: 0 0 auto; background: #2a1840; }
#room-root .av.ini{ display: inline-grid; place-content: center; font: 10px/1 var(--mono); color: #fff; }
#room-root .av.big{ width: 54px; height: 54px; font-size: 15px; }

/* встреча */
#room-root .ls-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#room-root .ls-head .kick{ font: 11px/1 var(--mono); color: var(--c); }
#room-root .ls-head .sp{ flex: 1; }
#room-root .ls h2{ font: 600 23px/1.2 var(--sans); color: #fff; margin: 0 0 6px; max-width: 1100px; }
#room-root .ls-sub{ font: 13.5px/1.45 var(--sans); color: var(--mute); margin: 0 0 14px; max-width: 1000px; }
#room-root .ls-grid{ display: grid; grid-template-columns: minmax(0, min(calc((100vh - 390px) * 16 / 9), calc(100% - 380px))) minmax(340px, 1fr); gap: 22px; align-items: start; }
#room-root .screen{ position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgba(207, 164, 255, .35); box-shadow: 0 0 60px rgba(185, 147, 255, .18); overflow: hidden; }
#room-root .screen .slide{ width: 100%; height: 100%; object-fit: contain; display: block; }
#room-root .screen iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#room-root .screen .cap{ position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; background: linear-gradient(transparent, rgba(6, 3, 10, .92)); font: 15px/1.35 var(--sans); color: #fff; }
#room-root .screen .cap b{ font: 12px/1 var(--mono); color: var(--gold); margin-right: 10px; font-weight: 400; }
#room-root #lab .screen .go{ position: absolute; right: 14px; top: 14px; background: var(--gold); color: #1a0c2b; border-color: var(--gold); padding: 10px 12px; font-size: 12px; }
#room-root #lab .screen .go kbd{ color: #1a0c2b; border-color: #1a0c2b55; }
#room-root .scrub{ display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; }
#room-root .scrub input[type=range]{ flex: 1; accent-color: var(--gold); }
#room-root .scrub .n{ font: 11px/1 var(--mono); color: var(--mute); min-width: 58px; text-align: right; }
#room-root .strip{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scroll-behavior: smooth; }
#room-root .strip.wide{ margin-bottom: 10px; }
#room-root #lab .strip .th{ flex: 0 0 172px; padding: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(18, 9, 30, .8); border-color: rgba(77, 58, 110, .6); text-align: left; }
#room-root #lab .strip .th.on{ border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
#room-root .strip .th img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
#room-root .strip .th span{ font: 11px/1.3 var(--sans); color: #e6d8ef; padding: 6px 7px 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 3.6em; }
#room-root .strip .th span b{ font: 10px/1 var(--mono); color: var(--gold); font-weight: 400; margin-right: 5px; }
#room-root #lab .ls h5{ font: 11px/1 var(--mono); color: var(--gold); letter-spacing: .04em; margin: 22px 0 10px; font-weight: 400; }
#room-root .quotes{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
#room-root .quotes blockquote{ margin: 0; padding: 12px 14px; background: rgba(18, 9, 30, .7); border-left: 2px solid var(--gold); position: relative; }
#room-root .quotes blockquote .av{ position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; }
#room-root .quotes p{ margin: 0 34px 8px 0; font: 14px/1.5 var(--sans); color: #f4eaf8; }
#room-root .quotes cite{ font: 11px/1 var(--mono); font-style: normal; color: var(--mute); }
#room-root .voices, #room-root .cases, #room-root .take, #room-root .hw, #room-root .mat{ margin: 0; padding-left: 18px; font: 13.5px/1.55 var(--sans); color: #e2d4ec; }
#room-root .voices li, #room-root .cases li, #room-root .take li, #room-root .hw li, #room-root .mat li{ margin-bottom: 7px; }
#room-root .voices b, #room-root .cases b{ color: #fff; font-weight: 600; }
#room-root .voices b.who{ color: var(--lilac); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
#room-root .ls-side{ position: sticky; top: 0; background: rgba(14, 7, 23, .78); border: 1px solid rgba(77, 58, 110, .55); padding: 16px 16px 14px; max-height: calc(100vh - 150px); overflow: auto; }
#room-root .spk{ display: grid; gap: 10px; }
#room-root .lspk-card{ display: flex; gap: 12px; align-items: center; }
#room-root .lspk-card b{ display: block; font: 600 15px/1.2 var(--sans); color: #fff; }
#room-root .lspk-card span{ display: block; font: 12px/1.35 var(--sans); color: var(--mute); margin-top: 2px; }
#room-root .lspk-card em{ display: block; font: 10px/1 var(--mono); font-style: normal; color: var(--lilac); margin-top: 4px; }
#room-root .tldr{ font: 14.5px/1.55 var(--sans); color: #fff; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(77, 58, 110, .6); }
#room-root .tools{ display: flex; flex-wrap: wrap; gap: 5px; }
#room-root .tools a, #room-root .tools span{ font: 11px/1 var(--mono); padding: 5px 7px; border: 1px solid var(--line); color: var(--lilac); text-decoration: none; }
#room-root .tools span{ color: var(--mute); }
#room-root .ls-acts{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
#room-root .ls-meta{ font: 10.5px/1.5 var(--mono); color: var(--mute); margin-top: 12px; }

/* спикеры */
#room-root .lp-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
#room-root .lp{ display: flex; gap: 16px; padding: 16px; background: rgba(18, 9, 30, .72); border: 1px solid rgba(77, 58, 110, .55); }
#room-root .lp .ph{ width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 2px var(--gold), 0 0 28px rgba(255, 200, 97, .25); }
#room-root .lp .ph.ini{ display: grid; place-content: center; background: #2a1840; font: 600 26px/1 var(--sans); color: #fff; }
#room-root .lp-b{ min-width: 0; }
#room-root .lp h4{ font: 600 18px/1.2 var(--sans); color: #fff; }
#room-root .lp .role{ font: 11px/1.4 var(--mono); color: var(--gold); margin: 4px 0 8px; }
#room-root .lp .bio{ font: 13px/1.5 var(--sans); color: #d8c9e4; margin: 0 0 10px; }
#room-root .lp blockquote{ margin: 0 0 10px; padding-left: 10px; border-left: 2px solid var(--lilac); font: italic 13.5px/1.5 var(--sans); color: #fff; }
#room-root .lp-s{ display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
#room-root #lab .lp-s button{ padding: 6px 8px; text-align: left; line-height: 1.3; }
#room-root .lp-s b{ color: var(--gold); font-weight: 400; margin-right: 4px; }
#room-root .lc-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
#room-root .lc{ display: flex; gap: 12px; padding: 14px; background: rgba(18, 9, 30, .6); border: 1px solid rgba(77, 58, 110, .45); }
#room-root .lc .av{ width: 56px; height: 56px; --c: var(--rose); }
#room-root .lc h4{ font: 600 15px/1.2 var(--sans); color: #fff; margin-bottom: 4px !important; }
#room-root .lc p{ margin: 0; font: 12.5px/1.5 var(--sans); color: #cdbedb; }
#room-root .lcase{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
#room-root .lcase article{ padding: 12px 14px; border-left: 2px solid var(--gold); background: rgba(18, 9, 30, .6); }
#room-root .lcase b{ font: 600 14px/1.3 var(--sans); color: #fff; }
#room-root .lcase p{ margin: 6px 0 0; font: 13px/1.5 var(--sans); color: #d8c9e4; }

/* архив */
#room-root .ledger{ width: 100%; border-collapse: collapse; font: 12px/1.4 var(--mono); }
#room-root .ledger th{ text-align: left; color: var(--mute); font-weight: 400; padding: 6px 8px; border-bottom: 1px solid var(--line); }
#room-root .ledger td{ padding: 8px; border-bottom: 1px solid rgba(77, 58, 110, .35); color: #e2d4ec; }
#room-root .ledger td:nth-child(2){ font-family: var(--sans); font-size: 13px; color: #fff; }
#room-root .ledger tr[data-act]{ cursor: pointer; }
#room-root .ledger tr[data-act]:hover td{ background: rgba(185, 147, 255, .08); }
#room-root .cloud{ display: flex; flex-wrap: wrap; gap: 6px; }
#room-root .cloud a, #room-root .cloud span{ font: calc(11px + var(--n) * 1.6px)/1 var(--mono); padding: 6px 8px; border: 1px solid var(--line); color: var(--lilac); text-decoration: none; }
#room-root .cloud span{ color: var(--mute); }
#room-root .cloud i{ font-style: normal; color: var(--gold); margin-left: 4px; font-size: 10px; }
#room-root .mat.wide{ columns: 2; column-gap: 28px; padding-left: 0; list-style: none; }
#room-root .mat.wide li{ break-inside: avoid; }
#room-root .mat.wide span{ font: 10px/1 var(--mono); color: var(--mute); margin-right: 8px; }

/* харнесс */
#room-root .sys-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
#room-root #lab a.sys{ display: flex; flex-direction: column; text-decoration: none; background: rgba(18, 9, 30, .72); border: 1px solid rgba(77, 58, 110, .55); transition: border-color .15s, transform .15s; color: inherit; }
#room-root #lab a.sys:hover{ border-color: var(--gold); transform: translateY(-2px); }
#room-root .sys img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; display: block; border-bottom: 1px solid rgba(77, 58, 110, .55); }
#room-root .sys div{ padding: 12px 14px 14px; }
#room-root .sys h4{ font: 600 16px/1.2 var(--sans); color: #fff; }
#room-root .sys span{ font: 10.5px/1 var(--mono); color: var(--gold); display: block; margin: 5px 0 8px; }
#room-root .sys p{ margin: 0; font: 13px/1.5 var(--sans); color: #d8c9e4; }
#room-root .plat{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#room-root .plat article{ padding: 14px; border: 1px solid rgba(77, 58, 110, .55); background: rgba(18, 9, 30, .6); }
#room-root .plat a{ text-decoration: none; }
#room-root .plat h4{ font: 600 15px/1.2 var(--sans); color: #fff; margin-bottom: 6px !important; }
#room-root .plat p{ margin: 0; font: 12.5px/1.5 var(--sans); color: #cdbedb; }

/* в зале: лица и кнопки записи в показе */
#room-root #story-text .faces{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0 8px; }
#room-root #story-text .faces .f{ display: flex; align-items: center; gap: 7px; font: 12px/1.2 var(--mono); color: var(--c, var(--gold)); }
#room-root #story-text .faces img, #room-root #story-text .faces .ini{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--c, var(--gold)); }
#room-root #story-text .faces .ini{ display: inline-grid; place-content: center; background: #2a1840; color: #fff; font-size: 10px; }
#room-root #story-text .faces small{ display: block; color: var(--mute); font-size: 10px; }
#room-root #story-text .rec{ display: flex; gap: 6px; margin-top: 10px; }
#room-root #story-text .rec button{ font: 11px/1 var(--mono); padding: 7px 9px; background: rgba(16, 8, 26, .78); color: var(--lilac); border: 1px solid var(--violet); cursor: pointer; }
#room-root #story-text .rec button.main{ background: var(--gold); color: #1a0c2b; border-color: var(--gold); }
#room-root #story-text .rec button:hover{ color: #fff; border-color: var(--lilac); }
#room-root #story-text .rec button.main:hover{ color: #1a0c2b; }
#room-root #slidecap{ position: fixed; z-index: 4; pointer-events: none; left: 0; top: 0; font: 12px/1.3 var(--mono); color: #fff; background: rgba(8, 4, 13, .82); padding: 5px 9px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
#room-root #slidecap b{ color: var(--gold); font-weight: 400; margin-right: 8px; }
#room-root .facelbl{ position: absolute; left: 0; top: 0; font: 11px/1.2 var(--mono); color: #fff; text-shadow: 0 0 6px #000, 0 0 2px #000; white-space: nowrap; transition: opacity .3s; }
#room-root #panel .media{ margin: 8px 0 10px; }
#room-root #panel .media img.cov{ width: 100%; display: block; border: 1px solid var(--line); }
#room-root #panel .media .faces{ display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#room-root #panel .media .faces span{ display: flex; align-items: center; gap: 6px; font: 11px/1.2 var(--mono); color: var(--gold); }
#room-root #panel .media .faces img{ width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

@media  (max-width: 900px) {
  #room-root .lab-top{ flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  #room-root .lab-brand i{ display: none; }
  #room-root .lab-tabs{ margin-left: 0; order: 3; width: 100%; overflow-x: auto; }
  #room-root #lab .lab-tabs kbd, #room-root #lab .lab-x kbd{ display: none; }
  #room-root .lab-x{ margin-left: auto; }
  #room-root .lab-body{ padding: 14px 12px 50px; }
  #room-root .lab-count{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #room-root .lab-count b{ font-size: 22px; }
  #room-root .ls-grid{ grid-template-columns: minmax(0, 1fr); }
  #room-root .scrub{ flex-wrap: wrap; }
  #room-root .scrub input[type=range]{ flex-basis: 100%; order: -1; }
  #room-root .doors{ gap: 8px !important; }
  #room-root .door{ width: 80px !important; }
  #room-root .ls-side{ position: static; max-height: none; }
  #room-root .ls h2{ font-size: 20px; }
  #room-root .lp-grid, #room-root .sys-grid, #room-root .lc-grid{ grid-template-columns: 1fr; }
  #room-root .lp{ flex-direction: column; }
  #room-root .plat{ grid-template-columns: 1fr 1fr; }
  #room-root .ledger th:nth-child(n/**/+5), #room-root .ledger td:nth-child(n/**/+5){ display: none; }
  #room-root .mat.wide{ columns: 1; }
  #room-root #story-text .faces .f small{ display: none; }
}

/* фрагменты записей: кнопки в карточке и главе, проигрыватель поверх зала */
#room-root .clips{ display: grid; gap: 6px; margin-top: 10px; }
#room-root .clips button{ display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; text-align: left; padding: 6px; background: rgba(255, 200, 97, .07); border: 1px solid rgba(255, 200, 97, .45); color: #fff; font: 12.5px/1.35 var(--sans); cursor: pointer; }
#room-root .clips button:hover{ background: rgba(255, 200, 97, .16); }
#room-root .clips img{ width: 96px; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
#room-root .clips b{ display: block; font: 10.5px/1.3 var(--mono); color: #ffc861; margin-bottom: 2px; }
#room-root #clipbox{ position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(6, 3, 12, .72); backdrop-filter: blur(6px); }
#room-root #clipbox[hidden]{ display: none; }
#room-root #clipbox .in{ width: min(960px, calc(100vw - 32px)); background: #0d0716; border: 1px solid #ffc861; padding: 12px; }
#room-root #clipbox video{ width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; }
#room-root #clipbox .cap{ display: flex; gap: 12px; align-items: center; margin-top: 12px; }
#room-root #clipbox .cap img{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #ffc861; flex: none; }
#room-root #clipbox .cap b{ font: 600 15px/1.2 var(--sans); color: #fff; }
#room-root #clipbox .cap p{ margin: 3px 0; font: 17px/1.35 var(--sans); color: #fff; }
#room-root #clipbox .cap small{ font: 10.5px/1.3 var(--mono); color: var(--mute); }
#room-root #clipbox .acts{ display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
@media  (max-width: 600px) { #room-root .clips button{ grid-template-columns: 72px 1fr; } #room-root .clips img{ width: 72px; } #room-root #clipbox .cap p{ font-size: 15px; } }
#room-root #clipbox .acts button{ font: 11px/1 var(--mono); padding: 8px 11px; background: transparent; color: var(--lilac); border: 1px solid var(--violet); cursor: pointer; }
#room-root #clipbox .acts button.main{ background: var(--gold); color: #1a0c2b; border-color: var(--gold); }
#room-root #slidecap.wrap{ white-space: normal; text-align: center; line-height: 1.4; }