:root {
  --bg: #ffffff;
  --text: #1d1f23;
  --muted: #8b9098;
  --line: #e7e9ed;
  --soft: #eff1f4;
  --blue: #111;        /* accent — black, same as the cabinet (name kept) */
  --blue-dark: #2e2e2e;
  --green: #34c759;
  --toolbar: #111111;
  --wave: #c9ccd3;
  --tile-bg: #25282e;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { display: block; }

.app {
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr) auto auto;
  height: 100vh;
  min-width: 980px;
}

/* ============ TOP BAR ============ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--line);
  user-select: none;
  -webkit-app-region: drag;
}
.topbar button { -webkit-app-region: no-drag; }
.traffic { display: flex; gap: 8px; }
.tl { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }
.tl.red { background: #ff5f57; }
.tl.yellow { background: #febc2e; }
.tl.green { background: #28c840; }
/* the installed app (manifest.webmanifest) has the system's own window buttons (macOS on the left, Windows on the
   right): the drawn ones would be a second set */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: window-controls-overlay) {
  .traffic { display: none; }
  .topbar-right .reload-btn { display: flex; }
  .topbar-right { margin-left: auto; }
}

.topbar-right { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.timer {
  background: var(--soft);
  border-radius: 6px;
  padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}
.signal { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.signal i { width: 4px; border-radius: 1px; background: #e1e3e8; }
.signal i:nth-child(1) { height: 6px; }
.signal i:nth-child(2) { height: 10px; }
.signal i:nth-child(3) { height: 15px; }
.signal.q1 i:nth-child(-n+1), .signal.q2 i:nth-child(-n+2) { background: #f2c200; }
.signal.q3 i { background: #34c759; }
.tile-signal {
  position: absolute; top: 10px; right: 10px; z-index: 3; height: auto;
  padding: 7px 8px; border-radius: 10px; gap: 2px;
  background: rgba(20, 21, 25, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tile-signal i { width: 3px; background: rgba(255, 255, 255, .28); }
.tile-signal i:nth-child(1) { height: 5px; }
.tile-signal i:nth-child(2) { height: 8px; }
.tile-signal i:nth-child(3) { height: 12px; }
.tile-signal.q0 i { background: #e5484d; opacity: .7; }
.tiles.speaker:not(.swapped) #localTile .tile-signal, .tiles.speaker.swapped #remoteTile .tile-signal,
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tile-signal { top: 6px; right: 6px; transform: scale(.85); transform-origin: top right; }
.view-btn { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.view-btn svg { width: 20px; height: 20px; }
.reload-btn { display: none; } /* only in the installed app (the display-mode rule above): a browser has its own ⟳ */
.reload-pop { padding: 10px 12px 12px; width: 250px; }
.reload-pop b { font-size: 14px; }
.reload-pop p { margin: 4px 0 12px; font-size: 13px; line-height: 1.45; color: #50545b; }
.reload-row { display: flex; justify-content: flex-end; gap: 8px; }
.view-item { gap: 10px; }
.view-item .check { width: 14px; }
.view-ico { width: 20px; height: 20px; display: grid; place-items: center; color: #2b2e33; flex: none; }
.view-ico svg { width: 20px; height: 20px; }
/* «Файл…»: drop a file on the zone (or click it), the storage under it (app.js chooseTrack) */
.popover.file-pop { width: 230px; min-width: 0; padding: 6px; border-radius: 12px; }
.drop-zone { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 10px 8px; border: 1.5px dashed #c9c8c2; border-radius: 9px; background: #fafaf8; text-align: center; cursor: pointer; outline: none; transition: background .14s, border-color .14s, transform .14s; }
.drop-zone svg { width: 18px; height: 18px; color: #6b6e75; margin-bottom: 2px; transition: transform .18s, color .14s; }
.drop-zone b { font-size: 12.5px; font-weight: 600; color: #1d1f23; }
.drop-zone small { font-size: 11px; color: #8a8d93; line-height: 1.3; }
.drop-zone:hover, .drop-zone:focus-visible { border-color: #111; background: #fff; }
.drop-zone:hover svg { color: #111; transform: translateY(-2px); }
.drop-zone.over { border-color: #111; border-style: solid; background: #f0efeb; transform: scale(1.02); }
.drop-zone.over svg { color: #111; transform: translateY(-4px); }
.drop-store { width: 100%; margin-top: 4px; padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.drop-store-t { flex: 1; text-align: left; }
.drop-chev { width: 16px; height: 16px; color: #9a9ea6; flex: none; }
@media (prefers-reduced-motion: reduce) { .drop-zone, .drop-zone svg { transition: none; } .drop-zone.over { transform: none; } }

.rec-indicator {
  display: flex; align-items: center; gap: 6px;
  color: #e53935; font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rec-indicator i { width: 8px; height: 8px; border-radius: 50%; background: #e53935; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ============ STAGE ============ */
.stage {
  position: relative;
  min-height: 0;
  container-type: size;
  overflow: hidden;
}
.tiles {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 5px;
}
.tile {
  position: relative;
  flex: none;
  width: min(calc((100cqw - 22px) / 2), calc((100cqh - 16px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tile-bg);
}
.tile:fullscreen { border-radius: 0; width: 100%; height: 100%; aspect-ratio: auto; }

/* speaker layout */
.tiles.speaker #remoteTile { width: min(calc(100cqw - 20px), calc((100cqh - 16px) * 16 / 9)); }
.tiles.speaker #localTile {
  position: absolute;
  right: 18px; bottom: 14px;
  width: min(24cqw, 340px);
  z-index: 2;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.tiles.speaker #localTile .tile-controls { transform: scale(.82); left: 8px; bottom: 8px; }

/* swapped: the videos trade places (set per participant, not synced) */
.tiles.swapped #localTile { order: -1; }
.tiles.speaker.swapped #localTile {
  position: relative; right: auto; bottom: auto; z-index: auto; box-shadow: none;
  width: min(calc(100cqw - 20px), calc((100cqh - 16px) * 16 / 9));
}
.tiles.speaker.swapped #localTile .tile-controls { transform: none; left: 10px; bottom: 10px; }
.tiles.speaker.swapped #remoteTile {
  position: absolute; right: 18px; bottom: 14px;
  width: min(24cqw, 340px); z-index: 2;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.tiles.speaker.swapped #remoteTile .tile-controls { transform: scale(.82); left: 8px; bottom: 8px; }

.swap-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(38, 40, 46, .74); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: .75;
  transition: transform .2s, opacity .15s, background .15s;
}
.swap-btn:hover { opacity: 1; background: rgba(20, 21, 25, .9); transform: translate(-50%, -50%) scale(1.06); }
.swap-btn:active { transform: translate(-50%, -50%) scale(.95); }
.swap-btn svg { width: 15px; height: 15px; transition: transform .3s; }
.tiles.swapped .swap-btn svg { transform: rotate(180deg); }
/* speaker: the button sits on the middle of the small video's top edge */
.tiles.speaker .swap-btn {
  left: auto; top: auto; transform: none;
  right: calc(18px + min(24cqw, 340px) / 2 - 15px);
  bottom: calc(14px + min(24cqw, 340px) * 9 / 16 - 15px);
}
.tiles.speaker .swap-btn:hover { transform: scale(1.06); }
.tiles.speaker .swap-btn:active { transform: scale(.96); }

.tile-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--tile-bg);
}
.tile-video.mirrored { transform: scaleX(-1); }
.tile-video.contain { object-fit: contain; background: #111; }

.placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 40%, #3a3e46 0%, #24272d 70%);
  color: #cfd3da;
  font-size: 15px;
}
.avatar {
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 40px; font-weight: 600; color: #fff;
}
.avatar-student { background: linear-gradient(135deg, #f38fb4, #b36fe0); }
.avatar-teacher { background: linear-gradient(135deg, #4a4a4a, #111); }
.ph-btn {
  background: #fff; color: #1d1f23;
  border-radius: 10px; padding: 8px 16px; font-size: 14px; font-weight: 500;
}

.tile-controls {
  position: absolute; left: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 2px;
  padding: 3px;
  background: rgba(20, 21, 25, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  color: #fff;
  z-index: 3;
  transform-origin: bottom left;
}
.tc-btn {
  position: relative; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; color: #fff; opacity: .9; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.tc-btn:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.tc-btn svg { width: 18px; height: 18px; }
.tc-toggle .i-off { display: none; }
.tc-toggle.off { background: #e5484d; opacity: 1; }
.tc-toggle.off .i-on { display: none; }
.tc-toggle.off .i-off { display: block; }
.tc-toggle:disabled { opacity: .35; cursor: default; background: none; }
.tc-mirror input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tc-mirror:has(input:checked) { background: rgba(255, 255, 255, .22); opacity: 1; }
.tc-mirror:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 1px; }

.switch { position: relative; width: 34px; height: 20px; flex: none; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch .slider { position: absolute; inset: 0; border-radius: 10px; background: #e2e4e8; transition: background .2s; }
.switch .slider::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .2s;
}
.switch input:checked + .slider { background: var(--green); }
.switch input:checked + .slider::after { transform: translateX(14px); }

.name-tag {
  position: absolute; left: 10px; top: 10px;
  background: #fff; color: #111;
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 17px;
  z-index: 3;
}

/* drawer */
.drawer {
  position: absolute; top: 12px; right: 12px; bottom: 12px;
  width: 330px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 20, 40, .18);
  display: flex; flex-direction: column;
  z-index: 10;
  overflow: hidden;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.drawer-tabs { display: flex; gap: 4px; background: var(--soft); border-radius: 9px; padding: 3px; }
.dtab { padding: 5px 14px; border-radius: 7px; font-size: 14px; color: #555; }
.dtab.active { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.drawer-close { width: 28px; height: 28px; border-radius: 8px; color: #666; }
.drawer-close:hover { background: var(--soft); }
.drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { margin: auto; color: var(--muted); font-size: 14px; }
.msg { align-self: flex-end; max-width: 85%; }
.msg .meta { font-size: 11px; color: var(--muted); text-align: right; margin-bottom: 3px; }
.msg .bubble { background: var(--blue); color: #fff; padding: 8px 12px; border-radius: 14px 14px 4px 14px; font-size: 14px; line-height: 1.35; word-wrap: break-word; }
.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px; outline: none; }
.chat-form input:focus { border-color: var(--blue); }
.chat-form button { width: 38px; border-radius: 10px; background: var(--blue); color: #fff; display: grid; place-items: center; }
.chat-form button svg { width: 18px; height: 18px; }
/* pictures in the chat */
.chat-form .chat-attach { background: transparent; color: #6b7078; border: 1px solid var(--line); }
.chat-form .chat-attach:hover { background: var(--soft); color: #111; }
.msg .chat-img { display: block; padding: 3px; border-radius: 14px; cursor: zoom-in; }
.msg .chat-img img { display: block; max-width: 220px; max-height: 220px; border-radius: 11px; background: #fff; }
.msg.undelivered .bubble { opacity: .5; }
.msg.undelivered .meta::after { content: ' · не доставлено'; color: #e5484d; }
.drawer-body[data-pane="chat"].dragover { box-shadow: inset 0 0 0 2px #111; background: #fafaf8; }
.modal:has(.img-view) { width: min(920px, calc(100vw - 32px)); padding: 14px 14px 12px; }
.img-view img { display: block; max-width: 100%; max-height: calc(100vh - 150px); margin: 0 auto 12px; border-radius: 10px; object-fit: contain; }
.img-view .btn { text-decoration: none; display: inline-flex; align-items: center; color: var(--text); }
.people { list-style: none; margin: 0; padding: 8px; }
.people li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; font-size: 14px; }
.people li:hover { background: var(--soft); }
.p-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; }
.p-name { flex: 1; }
.p-role { color: var(--muted); font-size: 13px; }

.reactions-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }

/* reactions: a flock of emoji, each cue with its own motion */
.fx { position: absolute; line-height: 1; opacity: 0; will-change: transform, opacity; animation: fxBurst 2.4s ease-out both; }
.fx-up { animation: fxUp 1.7s cubic-bezier(.3, .6, .4, 1) both; }
.fx-down { animation: fxDown 1.8s cubic-bezier(.5, 0, .7, .4) both; }
.fx-straight { animation: fxStraight 1.4s linear both; }
.fx-breath { animation: fxBreath 3.4s ease-in-out both; }
.fx-louder { animation: fxLouder 2.4s ease-out both; }
.fx-quieter { animation: fxQuieter 2.6s ease-out both; }
.fx-crawl { animation: fxCrawl 6s linear both; }
.fx-spin { animation: fxSpin 2.2s ease-out both; }
@keyframes fxBurst {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  12% { transform: translate(calc(var(--dx) * .2), -24px) scale(1.15); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--h) * -.85)) scale(1); opacity: 0; }
}
@keyframes fxUp {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * .25), calc(var(--h) * -.95)) scale(1.1); opacity: 0; }
}
@keyframes fxDown {
  0% { transform: translate(0, -10px) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * .25), calc(var(--h) - 40px)) scale(1.1); opacity: 0; }
}
@keyframes fxStraight {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  12% { opacity: 1; transform: translateY(-20px) scale(1); }
  80% { transform: translateY(calc(var(--h) * -.7)) scale(1); opacity: 1; }
  90% { transform: translateY(calc(var(--h) * -.76)) scale(1.35); }
  100% { transform: translateY(calc(var(--h) * -.8)) scale(1); opacity: 0; }
}
@keyframes fxBreath {
  0% { transform: translate(0, 0) scale(.7); opacity: 0; }
  12% { opacity: 1; }
  25% { transform: translate(var(--dx), calc(var(--h) * -.18)) scale(1.35); }
  50% { transform: translate(calc(var(--dx) * -1), calc(var(--h) * -.36)) scale(.9); }
  75% { transform: translate(var(--dx), calc(var(--h) * -.54)) scale(1.35); opacity: 1; }
  100% { transform: translate(0, calc(var(--h) * -.72)) scale(.9); opacity: 0; }
}
@keyframes fxLouder {
  0% { transform: translate(0, 0) scale(.35); opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * .5), calc(var(--h) * -.55)) scale(2.3); opacity: 0; }
}
@keyframes fxQuieter {
  0% { transform: translate(0, 0) scale(1.9); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * .3), calc(var(--h) * -.4)) scale(.35); opacity: 0; }
}
@keyframes fxCrawl {
  0% { transform: translateX(0) rotate(0); opacity: 0; }
  5% { opacity: 1; }
  10% { transform: translateX(calc(var(--w) * -0.1)) rotate(4deg); }
  20% { transform: translateX(calc(var(--w) * -0.2)) rotate(-4deg); }
  30% { transform: translateX(calc(var(--w) * -0.3)) rotate(4deg); }
  40% { transform: translateX(calc(var(--w) * -0.4)) rotate(-4deg); }
  50% { transform: translateX(calc(var(--w) * -0.5)) rotate(4deg); }
  60% { transform: translateX(calc(var(--w) * -0.6)) rotate(-4deg); }
  70% { transform: translateX(calc(var(--w) * -0.7)) rotate(4deg); }
  80% { transform: translateX(calc(var(--w) * -0.8)) rotate(-4deg); }
  90% { transform: translateX(calc(var(--w) * -0.9)) rotate(4deg); }
  95% { opacity: 1; }
  100% { transform: translateX(calc(var(--w) * -1)) rotate(0); opacity: 0; }
}
@keyframes fxSpin {
  0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * .4), calc(var(--h) * -.8)) rotate(720deg) scale(1.1); opacity: 0; }
}
.fx-feather { animation: fxFeather 4.2s ease-in-out both; }
.fx-listen { animation: fxListen 2.8s ease-in-out both; }
.fx-bubble { animation: fxBubble 3.4s ease-out both; }
.fx-flame { animation: fxFlame 1.9s cubic-bezier(.2, .7, .4, 1) both; transform-origin: 50% 100%; }
@keyframes fxFlame {
  0% { transform: translate(0, 10px) scale(.4, .3); opacity: 0; }
  12% { transform: translate(calc(var(--dx) * .1), -10px) scale(1.1, 1.35); opacity: 1; }
  30% { transform: translate(calc(var(--dx) * -.15), calc(var(--h) * -.18)) scale(1.3, 1.1) rotate(-6deg); }
  50% { transform: translate(calc(var(--dx) * .25), calc(var(--h) * -.34)) scale(1.5, 1.7) rotate(6deg); }
  70% { transform: translate(calc(var(--dx) * -.2), calc(var(--h) * -.5)) scale(1.7, 1.5) rotate(-5deg); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * .4), calc(var(--h) * -.7)) scale(1.9, 2.1); opacity: 0; }
}
@keyframes fxFeather {
  0% { transform: translate(0, 0) rotate(-25deg); opacity: 0; }
  10% { opacity: 1; }
  25% { transform: translate(28px, calc(var(--h) * .18)) rotate(20deg); }
  50% { transform: translate(-22px, calc(var(--h) * .38)) rotate(-20deg); }
  75% { transform: translate(24px, calc(var(--h) * .56)) rotate(18deg); opacity: 1; }
  100% { transform: translate(0, calc(var(--h) * .72)) rotate(-10deg); opacity: 0; }
}
@keyframes fxListen {
  0% { transform: scale(.4); opacity: 0; }
  12% { transform: scale(1.2); opacity: 1; }
  28% { transform: scale(1); }
  44% { transform: scale(1.3); }
  60% { transform: scale(1); }
  76% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes fxBubble {
  0% { transform: translate(0, 0) scale(.3); opacity: 0; }
  15% { opacity: .95; }
  50% { transform: translate(calc(var(--dx) * .5), calc(var(--h) * -.4)) scale(1); }
  85% { transform: translate(var(--dx), calc(var(--h) * -.7)) scale(.8); opacity: .9; }
  100% { transform: translate(var(--dx), calc(var(--h) * -.75)) scale(1.5); opacity: 0; }
}
/* the piano's cues: a hand comes in from its side, the pedal is pressed, staccato hops */
.fx-fromLeft { animation: fxFromLeft 2.6s cubic-bezier(.2, .8, .3, 1) both; }
.fx-fromRight { animation: fxFromRight 2.6s cubic-bezier(.2, .8, .3, 1) both; }
.fx-press { animation: fxPress 2.2s ease-in-out both; }
.fx-hop { animation: fxHop 2s linear both; }
@keyframes fxFromLeft {
  0% { transform: translateX(0) rotate(-20deg); opacity: 0; }
  15% { opacity: 1; }
  55% { transform: translateX(calc(var(--w) * .3)) rotate(0); }
  80% { opacity: 1; }
  100% { transform: translateX(calc(var(--w) * .36)) rotate(0); opacity: 0; }
}
@keyframes fxFromRight {
  0% { transform: translateX(0) rotate(20deg); opacity: 0; }
  15% { opacity: 1; }
  55% { transform: translateX(calc(var(--w) * -.3)) rotate(0); }
  80% { opacity: 1; }
  100% { transform: translateX(calc(var(--w) * -.36)) rotate(0); opacity: 0; }
}
@keyframes fxPress {
  0% { transform: translateY(-10px) scale(.7); opacity: 0; }
  12% { transform: translateY(0) scale(1); opacity: 1; }
  25% { transform: translateY(16px) scale(1.05, .9); }
  38% { transform: translateY(0) scale(1); }
  51% { transform: translateY(16px) scale(1.05, .9); }
  64% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-6px) scale(1); opacity: 0; }
}
@keyframes fxHop {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  8% { opacity: 1; transform: translate(0, -30px) scale(1); }
  16% { transform: translate(calc(var(--dx) * .15), 0); }
  24% { transform: translate(calc(var(--dx) * .3), calc(var(--h) * -.2)); }
  32% { transform: translate(calc(var(--dx) * .45), calc(var(--h) * -.05)); }
  42% { transform: translate(calc(var(--dx) * .6), calc(var(--h) * -.35)); }
  52% { transform: translate(calc(var(--dx) * .75), calc(var(--h) * -.18)); }
  64% { transform: translate(calc(var(--dx) * .9), calc(var(--h) * -.5)); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--h) * -.6)); opacity: 0; }
}
/* «Рахуй»: big numbers one after another */
.fx-count { position: absolute; transform: translate(-50%, -50%); width: 3em; height: 1em; pointer-events: none; animation: fxVibIn 2.9s ease both; }
.fx-count > span { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-weight: 700; color: #fff; line-height: 1; text-shadow: 0 4px 18px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 255, 255, .35); opacity: 0; animation: fxCountPop .42s ease-out both; }
.fx-count b { position: absolute; left: 50%; top: 100%; margin-top: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: #111; background: #fff; border-radius: 99px; padding: 6px 16px 6px 12px; box-shadow: 0 8px 26px rgba(0, 0, 0, .3); white-space: nowrap; }
.fx-count b span { font-size: 20px; line-height: 1; }
@keyframes fxCountPop {
  0% { opacity: 0; transform: scale(1.6); }
  25% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.8); }
}
/* «Легато»: one calm line, slower */
.fx-vibrato.calm .v2, .fx-vibrato.calm .v3 { display: none; }
.fx-vibrato.calm .v-line { animation-duration: 1.4s; }
.fx-vibrato.calm .v-amp { animation: none; transform: scaleY(.45); }
/* «Вібрато»: wavy lines flow across the video and swell */
.fx-vibrato { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; animation: fxVibIn 3.4s ease both; }
.fx-vibrato svg { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.fx-vibrato .v-line { fill: none; stroke-linecap: round; stroke-linejoin: round; animation: fxVibMove .55s linear infinite; }
.fx-vibrato .v1 { stroke: #fff; stroke-width: 5.5; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55)); }
.fx-vibrato .v2 { stroke: rgba(255, 255, 255, .55); stroke-width: 2.5; animation-duration: .4s; }
.fx-vibrato .v3 { stroke: rgba(255, 214, 107, .7); stroke-width: 2; animation-duration: .7s; }
.fx-vibrato .v-amp { transform-box: fill-box; transform-origin: center; animation: fxVibAmp .9s ease-in-out infinite alternate; }
.fx-vibrato b { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: #111; background: #fff; border-radius: 99px; padding: 6px 16px 6px 12px; box-shadow: 0 8px 26px rgba(0, 0, 0, .3); white-space: nowrap; }
.fx-vibrato b span { font-size: 20px; line-height: 1; }
@keyframes fxVibMove { from { transform: translateX(0); } to { transform: translateX(calc(var(--L) * -1)); } }
@keyframes fxVibAmp { from { transform: scaleY(.55); } to { transform: scaleY(1.15); } }
@keyframes fxVibIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.4); }
  12% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
  85% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.08); }
}
/* 👏: the clapping hands clap twice in the middle, the way animated emoji do — they open a little (lean back, widen),
   then snap shut (squeeze) and bounce, with white strokes bursting out at each clap (the flock of 👏 flies up after) */
.fx-clap { position: absolute; transform: translate(-50%, -50%); width: 1.1em; height: 1.1em; line-height: 1; pointer-events: none; animation: fxClapIn 1.3s ease both; }
.fx-clap span { position: absolute; inset: 0; text-align: center; transform-origin: 50% 85%; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); animation: fxClapHands 1s linear both; }
.fx-clap .c-flash { position: absolute; left: 50%; top: -.32em; width: .9em; height: .4em; margin-left: -.45em; z-index: 1; opacity: 0; animation: fxClapFlash 1s ease-out both; }
.fx-clap .c-flash i { position: absolute; left: 50%; bottom: 0; width: .05em; height: .24em; margin-left: -.025em; border-radius: 99px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); transform-origin: 50% 100%; }
.fx-clap .c-flash i:nth-child(1) { transform: rotate(-45deg) translateY(-.03em); }
.fx-clap .c-flash i:nth-child(3) { transform: rotate(45deg) translateY(-.03em); }
@keyframes fxClapHands {
  0% { transform: rotate(-12deg) scale(1.06, .98); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  24% { transform: rotate(-12deg) scale(1.1, .96); animation-timing-function: cubic-bezier(.7, 0, 1, .6); }
  29% { transform: rotate(5deg) scale(.86, 1.06); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  38% { transform: rotate(0) scale(1.12); animation-timing-function: ease-in-out; }
  50% { transform: rotate(-12deg) scale(1.08, .97); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  72% { transform: rotate(-12deg) scale(1.1, .96); animation-timing-function: cubic-bezier(.7, 0, 1, .6); }
  77% { transform: rotate(5deg) scale(.86, 1.06); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  87% { transform: rotate(0) scale(1.14); animation-timing-function: ease-out; }
  100% { transform: rotate(0) scale(1); }
}
@keyframes fxClapFlash {
  0%, 27% { opacity: 0; transform: scale(.5); }
  31% { opacity: 1; transform: scale(1); }
  44% { opacity: 0; transform: translateY(-.12em) scale(1.25); }
  75% { opacity: 0; transform: scale(.5); }
  79% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: translateY(-.14em) scale(1.3); }
}
@keyframes fxClapIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  10%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(.9); }
}
/* «Ширше рот»: the lips open wide three times */
.fx-mouth { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; animation: fxMouthIn 3.9s ease both; pointer-events: none; }
.fx-mouth svg { width: var(--s); height: auto; overflow: visible; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35)); }
.fx-mouth b { margin-top: 14px; font-size: 17px; font-weight: 600; color: #111; background: #fff; border-radius: 99px; padding: 6px 16px; box-shadow: 0 8px 26px rgba(0, 0, 0, .3); white-space: nowrap; }
.fx-mouth .m-open, .fx-mouth .m-tongue { transform-box: fill-box; transform-origin: center; animation: fxMouthOpen 1.1s ease-in-out .35s 3 both; }
.fx-mouth .m-top { animation: fxLipUp 1.1s ease-in-out .35s 3 both; }
.fx-mouth .m-bottom { animation: fxLipDown 1.1s ease-in-out .35s 3 both; }
@keyframes fxMouthOpen { 0%, 100% { transform: scaleY(.08); } 45%, 60% { transform: scaleY(1); } }
@keyframes fxLipUp { 0%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(-13px); } }
@keyframes fxLipDown { 0%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(16px); } }
@keyframes fxMouthIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  8% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  14%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(.96); }
}
.fx-caption {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 600; color: #111; background: #fff; border-radius: 99px; padding: 8px 18px 8px 12px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3); white-space: nowrap; animation: fxCaption 2.6s ease both;
}
.fx-caption span { font-size: 24px; line-height: 1; }
@keyframes fxCaption {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  18%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.96); }
}
/* words of support: white words arrive one by one, a soft glow behind and white sparks flying out (black-and-white, like the room) */
.fx-phrase {
  position: absolute; transform: translate(-50%, -50%); text-align: center; line-height: 1.12; width: max-content;
  font-weight: 700; letter-spacing: -.3px; color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(255, 255, 255, .45));
  animation: fxPhraseOut 4.8s ease both;
}
.fx-phrase span {
  display: inline-block;
  animation: fxWordIn .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes fxWordIn {
  0% { opacity: 0; transform: translateY(18px) scale(.6) rotate(-4deg); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes fxPhraseOut {
  0%, 82% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -85%); }
}
.fx-glow {
  position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08) 55%, transparent 100%);
  animation: fxGlow 4.8s ease-out both;
}
@keyframes fxGlow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  30%, 80% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.1); }
}
.fx-spark { position: absolute; line-height: 1; color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .9); opacity: 0; animation: fxSparkOut 1.9s cubic-bezier(.15, .7, .3, 1) both; }
@keyframes fxSparkOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(160deg); }
}
@media (prefers-reduced-motion: reduce) { .fx, .fx-spark { animation-duration: .01s !important; } .fx-phrase span { animation: none; } .fx-mouth *, .fx-clap *, .fx-vibrato *, .fx-count * { animation: none !important; } }

/* ============ PANEL ============ */
.panel {
  display: flex;
  height: 146px;
  border-top: 1px solid var(--line);
  background: #fff;
  min-width: 0;
}
.section {
  position: relative;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.section:last-child { border-right: 0; }
.q {
  position: absolute; top: 7px; left: 7px;
  width: 16px; height: 16px;
  border: 1.4px solid #2b2e33; border-radius: 50%;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  z-index: 2;
}
.q:hover { background: var(--soft); }
.q-inline { position: static; flex: none; }
.spacer { flex: 1; }

#moreBtn { order: 99; } /* «More» always last */
/* Customize popover: tick + drag to reorder */
.lay { width: 250px; padding: 2px 0 0; }
.lay-head { padding: 2px 6px 4px; }
.lay-head b { display: block; font-size: 14px; font-weight: 600; }
.lay-cap { padding: 6px 6px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.lay-list { background: rgba(255, 255, 255, .06); border-radius: 11px; padding: 2px; margin-bottom: 4px; }
.lay-list:last-child { margin-bottom: 2px; }
.lay-row { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 2px; border-radius: 9px; transition: background .12s, opacity .12s; }
.lay-row + .lay-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.lay-row:hover { background: rgba(255, 255, 255, .06); box-shadow: none; }
.lay-row:hover + .lay-row { box-shadow: none; }
.lay-row.dragging { opacity: .35; }
.lay-grip { width: 14px; height: 22px; flex: none; display: grid; place-items: center; color: rgba(255, 255, 255, .25); cursor: grab; }
.lay-grip svg { width: 7px; height: 12px; }
.lay-row:hover .lay-grip { color: rgba(255, 255, 255, .7); }
.lay-ico { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, .1); font-size: 12px; line-height: 1; }
.lay-ico svg { width: 13px; height: 13px; }
.lay-name { flex: 1; font-size: 13px; }
.lay-row.off .lay-ico, .lay-row.off .lay-name { opacity: .45; }
/* iOS-style switch */
.lay-toggle { position: relative; width: 30px; height: 18px; flex: none; cursor: pointer; }
.lay-toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.lay-toggle i { position: absolute; inset: 0; border-radius: 9px; background: rgba(255, 255, 255, .18); transition: background .18s; pointer-events: none; }
.lay-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .18s; }
.lay-toggle input:checked + i { background: #34c759; }
.lay-toggle input:checked + i::after { transform: translateX(12px); }
.lay-toggle input:focus-visible + i { outline: 2px solid #fff; outline-offset: 2px; }

/* «More»: dark grid in the toolbar's colour */
.popover.more-pop { background: var(--toolbar); color: #fff; border-color: rgba(255, 255, 255, .1); padding: 10px; max-width: none; box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.more-grid { display: grid; grid-template-columns: repeat(3, 96px); gap: 4px; }
.more-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 12px 6px 10px; border-radius: 12px; color: #fff; text-align: center;
  transition: background .12s;
}
.more-tile:hover { background: rgba(255, 255, 255, .08); }
.more-tile:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.more-tile.on { background: rgba(255, 255, 255, .14); }
.more-ico { width: 26px; height: 26px; display: grid; place-items: center; font-size: 22px; line-height: 1; }
.more-ico svg { width: 24px; height: 24px; }
.more-label { font-size: 12.5px; line-height: 1.25; color: rgba(255, 255, 255, .9); }

/* role */
.sec-role { width: 190px; flex: none; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px 6px; }
/* «Учень / Вчитель» — whose side plays: a black-and-white switch, the chosen side a glossy black key */
.segment {
  width: 152px; padding: 4px; display: flex; flex-direction: column; gap: 4px; border-radius: 15px;
  background: #fff; border: 1px solid var(--hair, #e6e5e0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.seg-btn {
  position: relative; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em; color: #6b6e74;
  transition: background .2s, color .2s, box-shadow .2s, transform .12s;
}
.seg-btn svg { width: 16px; height: 16px; opacity: .8; transition: opacity .2s; }
.seg-btn:hover:not(.active) { color: #111; background: #f5f5f3; }
.seg-btn:active { transform: scale(.97); }
.seg-btn.active {
  color: #fff; font-weight: 600;
  background: linear-gradient(180deg, #2a2a2a 0%, #111 55%, #000 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 6px 14px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .25);
}
.seg-btn.active svg { opacity: 1; }
/* a small white dot: this side is playing now */
.seg-btn.active::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }

/* player */
.sec-player { flex: 1; min-width: 420px; }
/* the player: a glossy black play key, quiet round tools, a white «Файл» chip, a fine waveform */
.player-top { padding: 8px 0 0 14px; }
.player-row { display: flex; align-items: center; gap: 12px; height: 44px; padding-right: 14px; }
.play-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #3a3a3a 0%, #151515 55%, #000 100%); color: #fff;
  display: grid; place-items: center; flex: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px rgba(0, 0, 0, .28), 0 0 0 0 rgba(17, 17, 17, .12);
  transition: transform .12s, box-shadow .2s;
}
.play-btn:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 20px rgba(0, 0, 0, .32), 0 0 0 5px rgba(17, 17, 17, .08); }
.play-btn:active { transform: scale(.93); }
.play-btn svg { width: 18px; height: 18px; }
.play-btn .i-play { margin-left: 2px; }
.play-btn.playing { box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px rgba(0, 0, 0, .28), 0 0 0 5px rgba(17, 17, 17, .1); }
.play-btn .i-pause { display: none; }
.play-btn.playing .i-pause { display: block; }
.play-btn.playing .i-play { display: none; }
.track-name { font-size: 15px; font-weight: 600; letter-spacing: -.1px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.track-name.empty { color: #9a9da3; font-weight: 400; }
.loop-btn { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #3a3d42; flex: none; transition: background .15s, color .15s, transform .12s; }
.loop-btn svg { width: 19px; height: 19px; }
.loop-btn:hover { background: #f1f1ef; color: #111; }
.loop-btn:active { transform: scale(.93); }
.loop-btn.active { color: #fff; background: #111; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
.pill-btn {
  background: #fff; border: 1px solid #e3e2dd; border-radius: 12px;
  padding: 8px 15px;
  font-size: 14px; font-weight: 600; color: #111; white-space: nowrap;
  flex: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.pill-btn:hover { background: #111; border-color: #111; color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .16); }

.wave-row { display: flex; align-items: flex-end; gap: 10px; height: 36px; margin-top: 4px; padding-right: 14px; }
.wave { flex: 1; height: 32px; min-width: 0; cursor: pointer; }
.wave-row { position: relative; }
/* the time under the mouse, above the line */
.wave-tip { position: absolute; bottom: 38px; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: #111; color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; z-index: 3; }
.wave-tip[hidden] { display: none; }
.wave-x { position: absolute; top: 0; height: 0; pointer-events: none; z-index: 2; }
.wave-del { position: absolute; top: -9px; transform: translateX(-50%); width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 0; background: #111; color: #fff; font-size: 13px; line-height: 18px; text-align: center; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .15s, transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.wave-del.mk { background: #f08a24; width: 16px; height: 16px; line-height: 16px; font-size: 12px; top: -8px; }
.wave-row:hover .wave-del, .wave-del:focus-visible { opacity: 1; }
.wave-del:hover { transform: translateX(-50%) scale(1.15); }
@media (hover: none) { .wave-del { opacity: 1; } }
.wave-row .t { font-size: 11px; font-weight: 600; color: #111; font-variant-numeric: tabular-nums; letter-spacing: .02em; min-width: 28px; margin-bottom: 1px; }
.wave-row .t + .t { margin-left: -4px; color: #9a9da3; text-align: right; }
.sec-player.dragover { background: #f6f6f6; box-shadow: inset 0 0 0 2px var(--blue); }

.player-sliders {
  flex: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  margin-top: 3px;
  padding: 0 16px;
}
.ps { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ps-label { font-size: 14.5px; color: #2b2e33; }
.ps-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 250px; }
.ps-mm { font-size: 11.5px; color: #3a3d42; white-space: nowrap; min-width: 18px; text-align: center; }

.range {
  --p: 50%;
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 60px; height: 16px;
  background: transparent; margin: 0; cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--blue) var(--p), #e3e5e9 var(--p));
}
.range::-moz-range-track { height: 5px; border-radius: 3px; background: #e3e5e9; }
.range::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--blue); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px; margin-top: -5px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--blue);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.range::-moz-range-thumb {
  width: 11px; height: 11px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--blue);
}
.range:active::-webkit-slider-thumb { transform: scale(1.12); }

/* piano */
.sec-piano { width: clamp(360px, 34.5vw, 640px); flex: none; }
.piano-head { display: flex; align-items: center; gap: 10px; height: 36px; padding: 4px 10px 0 7px; }
.midi-btn { display: flex; align-items: center; gap: 7px; padding: 6px 14px; }
.midi-btn .dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.midi-btn.connected .dot { display: block; }
.octave { display: flex; align-items: center; border: 1px solid #d9dce1; border-radius: 9px; height: 30px; overflow: hidden; flex: none; }
.octave button { width: 30px; height: 100%; display: grid; place-items: center; color: #2b2e33; }
.octave button:hover { background: var(--soft); }
.octave button:disabled { color: #c3c6cc; cursor: default; background: none; }
.octave button svg { width: 16px; height: 16px; }
/* collapsed piano: no ‹ › control (octaves: ← → keys); expanded: it transposes */
.app:not(.piano-big) .octave { display: none; }
.octave.shifted { border-color: #111; }
.octave.shifted #octVal { font-weight: 600; }
.transpose-chip { height: 30px; padding: 0 10px; border-radius: 9px; background: #111; color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; flex: none; }
.transpose-chip:hover { background: #2e2e2e; }
.octave span {
  min-width: 42px; text-align: center; font-size: 14.5px; font-variant-numeric: tabular-nums;
  border-left: 1px solid #d9dce1; border-right: 1px solid #d9dce1;
  line-height: 28px;
}
.pedal-btn {
  width: 30px; height: 30px; flex: none; border: 1px solid #d9dce1; border-radius: 9px;
  display: grid; place-items: center; color: #2b2e33; transition: background .12s, color .12s, border-color .12s;
}
.pedal-btn:hover { background: var(--soft); }
.pedal-btn svg { width: 17px; height: 17px; }
.pedal-btn.on { background: #111; border-color: #111; color: #fff; }
.icon-plain { width: 26px; height: 26px; display: grid; place-items: center; color: #2b2e33; border-radius: 7px; flex: none; }
.icon-plain:hover { background: var(--soft); }
.icon-plain svg { width: 20px; height: 20px; }

.keyboard-scroll {
  flex: 1;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 0 0 4px;
  scrollbar-width: thin;
}
.keyboard-scroll::-webkit-scrollbar { height: 5px; }
.keyboard-scroll::-webkit-scrollbar-thumb { background: #cfd2d8; border-radius: 3px; }
.keyboard { position: relative; height: 100%; min-height: 96px; touch-action: none; user-select: none; }
.key { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.key.white {
  width: 24px; height: 100%;
  background: #fff;
  border: 1px solid #d5d8dd; border-top: 0;
  border-radius: 0 0 4px 4px;
  padding-bottom: 3px;
  z-index: 1;
}
.key.white + .key.white, .key.black + .key.white { margin-left: 0; }
.key.black {
  width: 14px; height: 58%;
  background: #0d0e10;
  border-radius: 0 0 3px 3px;
  padding-bottom: 3px;
  z-index: 2;
  box-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.key .kb { font-size: 11px; line-height: 1.25; color: #3a3d42; }
.key .nn { font-size: 11px; line-height: 1.3; color: #1d1f23; }
.key.black .kb { color: #fff; font-size: 10.5px; }
.key.white.active { background: linear-gradient(#dfe5ff, #b9c6ff); border-color: #9fb0f5; }
.key.black.active { background: linear-gradient(#3450ec, #1f35b8); }
.keyboard.no-labels .kb, .keyboard.no-labels .nn { visibility: hidden; }
.keyboard.labels-play .key:not(.mapped) .nn { visibility: hidden; }
.keyboard.labels-c .kb, .keyboard.labels-c .key:not(.c-key) .nn { visibility: hidden; }

/* ============ TOOLBAR ============ */
.toolbar {
  height: 68px;
  background: var(--toolbar);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px;
  user-select: none;
}
.tb-group { display: flex; align-items: center; }
.tb-left { gap: 14px; }
.tb-center { gap: 14px; }
.tb-right { justify-content: flex-end; }
.tb-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 10px;
  min-width: 82px;
  border-radius: 10px;
  font-size: 14px; letter-spacing: .1px;
  white-space: nowrap;
  transition: background .15s;
}
.tb-btn:hover { background: rgba(255,255,255,.08); }
.tb-btn.active { background: rgba(255,255,255,.14); }
.tb-icon { position: relative; height: 26px; display: grid; place-items: center; }
.tb-icon svg { width: 26px; height: 26px; }
.tb-icon .i-off { display: none; }
.tb-btn.off .i-on { display: none; }
.tb-btn.off .i-off { display: block; }
.tb-icon.emoji { font-size: 26px; line-height: 1; }
.badge {
  position: absolute; top: -6px; right: -10px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: #f2403c; color: #fff;
  box-shadow: 0 0 0 2px var(--toolbar); /* a ring in the bar's colour keeps it apart from the icon */
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
  display: grid; place-items: center;
}
.badge.dot { min-width: 11px; width: 11px; height: 11px; padding: 0; top: -1px; right: -3px; }
.badge.pop { animation: badge-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes badge-pop { from { transform: scale(.3); } }
@media (prefers-reduced-motion: reduce) { .badge.pop { animation: none; } }
.more-ico { position: relative; }
.tb-split { position: relative; display: flex; }
.tb-split .caret {
  position: absolute; top: 8px; right: 6px;
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center;
}
.tb-split .caret:hover { background: rgba(255,255,255,.14); }
.tb-split .caret svg { width: 14px; height: 14px; }
.tb-split .tb-btn { padding-right: 28px; min-width: 100px; }
#recordBtn.recording .rec-dot { fill: #f2403c; }

/* ============ POPOVER / MODAL / TOAST ============ */
.popover {
  position: fixed; z-index: 100;
  min-width: 220px; max-width: 320px;
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15, 20, 40, .2);
  padding: 6px;
  font-size: 14px;
  animation: pop .12s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.pop-title { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px 4px; text-transform: uppercase; letter-spacing: .4px; }
.pop-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px;
}
.pop-item:hover { background: var(--soft); }
.pop-item .check { width: 16px; color: var(--blue); font-weight: 700; }
.pop-item input[type=checkbox] { accent-color: var(--blue); width: 16px; height: 16px; margin: 0; }
.pop-text { padding: 8px 10px 10px; line-height: 1.45; color: #3a3d42; }
.pop-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.pop-row .range { flex: 1; }
.pop-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.emoji-row { display: flex; gap: 2px; padding: 2px; }
.emoji-row button { font-size: 26px; width: 42px; height: 42px; border-radius: 10px; }
.emoji-row button:hover { background: var(--soft); transform: scale(1.1); }
.cue-title { padding: 8px 8px 4px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.cue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; }
.cue-grid button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: 10px; }
.cue-grid button span { font-size: 22px; line-height: 1; transition: transform .12s; }
.cue-grid button small { font-size: 11.5px; line-height: 1.2; color: #50545b; text-align: center; }
.cue-grid button:hover { background: var(--soft); }
.cue-grid button:hover span { transform: scale(1.12); }
.phrase-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 4px 4px; max-width: 300px; }
.phrase-list button { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; color: var(--text); transition: background .12s, border-color .12s; }
.phrase-list button:hover { background: #fff8e1; border-color: #f0d38a; }

/* Reactions: one calm, premium panel — emoji tray, cue tiles, words of support */
.popover.react-pop { width: 330px; max-width: calc(100vw - 16px); padding: 10px; border-radius: 16px; border-color: #ecebe7; box-shadow: 0 18px 50px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .06); }
.react-pop .emoji-row { justify-content: space-between; gap: 0; padding: 3px 4px; background: #f5f5f2; border-radius: 12px; }
.react-pop .emoji-row button { width: 33px; height: 33px; font-size: 20px; border-radius: 50%; display: grid; place-items: center; transition: transform .14s cubic-bezier(.3, .7, .4, 1.4), background .14s, box-shadow .14s; }
.react-pop .emoji-row button:hover { background: #fff; transform: translateY(-2px) scale(1.12); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.react-pop .emoji-row button:active { transform: scale(.94); }
.react-pop .cue-title { border-top: 0; margin: 9px 0 0; padding: 0 2px 5px; font-size: 10px; letter-spacing: .9px; color: #9a9994; }
.react-pop .cue-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0; } /* (15 cues: three rows of five) */
.react-pop .cue-grid button { background: #f7f7f5; border: 1px solid #efeeea; border-radius: 10px; padding: 5px 1px 4px; gap: 2px; transition: background .14s, border-color .14s, transform .14s, box-shadow .14s; }
.react-pop .cue-grid button span { font-size: 17px; }
.react-pop .cue-grid button small { font-size: 10px; line-height: 1.15; font-weight: 500; color: #3c3f45; letter-spacing: 0; }
.react-pop .cue-grid button:hover { background: #fff; border-color: #e2e1dc; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, .08); }
.react-pop .cue-grid button:hover span { transform: scale(1.1); }
.react-pop .cue-grid button:active { transform: scale(.97); }
.react-pop .phrase-list { max-width: none; padding: 0; gap: 4px; }
.react-pop .phrase-list button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border: 1px solid #e6e5e0; background: #fff; font-size: 11.5px; font-weight: 500; color: #1d1f23; transition: background .14s, color .14s, border-color .14s, transform .14s; }
.react-pop .phrase-list button i { font-style: normal; font-size: 9px; color: #c9a227; transition: color .14s; }
.react-pop .phrase-list button:hover { background: #111; border-color: #111; color: #fff; }
.react-pop .phrase-list button:hover i { color: #f2d06b; }
.react-pop .phrase-list button:active { transform: scale(.97); }
/* «Мої»: the kept reactions (a click sends, × takes off) and «＋ Своя» — an emoji and the words, kept or sent (app.js) */
.my-list { display: flex; flex-wrap: wrap; gap: 4px; }
.my-chip { position: relative; display: inline-flex; }
.my-send { display: inline-flex; align-items: center; gap: 5px; max-width: 290px; padding: 4px 10px 4px 7px; border-radius: 99px; border: 1px solid #e6e5e0; background: #fff; font-size: 15px; line-height: 1.2; transition: background .14s, color .14s, border-color .14s, transform .14s; }
.my-send b { font-size: 11.5px; font-weight: 500; color: #1d1f23; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-send:hover { background: #111; border-color: #111; }
.my-send:hover b { color: #fff; }
.my-send:active { transform: scale(.97); }
.my-x { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid #dcdbd6; color: #6b6e75; font-size: 12px; line-height: 1; opacity: 0; transition: opacity .12s; }
.my-chip:hover .my-x, .my-x:focus-visible { opacity: 1; }
.my-x:hover { background: #e5484d; border-color: #e5484d; color: #fff; }
@media (pointer: coarse) { .my-x { opacity: 1; } }
.my-add { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px 4px 8px; border-radius: 99px; border: 1px dashed #c9c8c2; background: #fafaf8; font-size: 11.5px; font-weight: 600; color: #3c3f45; transition: background .14s, border-color .14s; }
.my-add i { font-style: normal; font-size: 12px; }
.my-add:hover, .my-add.on { background: #fff; border-color: #111; border-style: solid; }
.my-make { margin-top: 6px; padding: 8px; border-radius: 12px; background: #f5f5f2; }
.my-make[hidden] { display: none; }
.my-emojis { display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; }
.my-emojis button { height: 30px; border-radius: 8px; font-size: 18px; display: grid; place-items: center; transition: background .12s, transform .12s; }
.my-emojis button:hover { background: #fff; transform: scale(1.12); }
.my-emojis button.on { background: #fff; box-shadow: inset 0 0 0 1.5px #111; }
.my-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.my-pick { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; font-size: 20px; }
.my-row input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #e2e1dc; border-radius: 10px; background: #fff; font-size: 13px; color: var(--text); }
.my-row input:focus { outline: none; border-color: #111; }
.my-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 7px; }
.my-btns button { height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.my-keep { border: 1px solid #e2e1dc; background: #fff; color: #1d1f23; }
.my-keep:hover { border-color: #111; }
.my-go { background: #111; color: #fff; }
.my-go:hover { background: #333; }
/* «Слова підтримки | Мої»: the switch over the words (app.js setReactTab) */
.react-tabs { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 10px 0 6px; }
.rt-seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: #f0efeb; }
.rt-seg button { height: 26px; padding: 0 10px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: #6b6e75; transition: background .14s, color .14s, box-shadow .14s; }
.rt-seg button:hover { color: #111; }
.rt-seg button.on { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.rt-seg button i { font-style: normal; display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 3px; padding: 0 4px; border-radius: 8px; background: #111; color: #fff; font-size: 10px; }
.my-empty { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.4; color: #8a8d93; }
@media (prefers-reduced-motion: reduce) { .react-pop button { transition: none !important; transform: none !important; } }


.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 14, 30, .45);
  display: grid; place-items: center;
  animation: fade .15s;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); overflow-y: auto;
  background: #fff; border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.modal h2 { margin: 0 0 8px; font-size: 19px; }
/* ✕ in the top right corner of a dialog (the student's «Приєднатися до уроку») */
.modal:has(.modal-x) { position: relative; }
.modal:has(.modal-x) h2 { padding-right: 36px; }
.modal-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 9px; font-size: 14px; color: #6b7078; background: var(--soft); transition: background .14s, color .14s; }
.modal-x:hover { background: #e4e7ec; color: #111; }
.modal p { margin: 0 0 16px; color: #50545b; font-size: 14.5px; line-height: 1.5; }
.modal table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 16px; }
.modal td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.modal td:first-child { width: 42%; }
.modal kbd { background: var(--soft); border: 1px solid #d9dce1; border-radius: 5px; padding: 1px 6px; font-family: inherit; font-size: 12.5px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.about-history { max-height: 280px; overflow-y: auto; margin: 0 0 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.about-title { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.about-ver + .about-ver { margin-top: 12px; }
.about-ver-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.about-ver-head span { color: var(--muted); font-size: 12.5px; }
.about-ver ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: #50545b; }
.about-ver ul.about-notes { list-style: none; padding: 0; margin-top: 6px; display: grid; gap: 6px; }
.about-notes li { display: flex; align-items: baseline; gap: 8px; }
.about-tag { flex: none; font-style: normal; font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 7px; border-radius: 6px; min-width: 74px; text-align: center; }
.about-tag.new { background: #e8f1ff; color: #1d5bd8; }
.about-tag.better { background: #e9f7ef; color: #1f8a4c; }
.about-tag.fix { background: #fff3e0; color: #b25e00; }
.btn { padding: 9px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 500; background: var(--soft); }
.btn:hover { background: #e4e7ec; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.danger { background: #f2403c; color: #fff; }
.btn.danger:hover { background: #dc302c; }

.ended {
  position: fixed; inset: 0; z-index: 300;
  background: #f6f7f9;
  display: grid; place-items: center; padding: 24px;
  animation: fade .2s;
}
.ended-card {
  width: min(460px, 100%);
  background: #fff; border: 1px solid var(--line); border-radius: 28px;
  box-shadow: 0 12px 40px rgba(15, 20, 40, .08);
  padding: 34px 32px 28px; text-align: center; color: var(--text);
}
.ended-logo { display: block; width: 120px; height: auto; margin: 0 auto 22px; }
.ended-check {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: #e7f6ee; color: #1f9d55;
}
.ended-check svg { width: 32px; height: 32px; }
.ended h1 { margin: 0 0 6px; font-size: 24px; font-weight: 600; letter-spacing: -.2px; }
.ended-sub { margin: 0 0 22px; color: #50545b; font-size: 14.5px; }
.ended-stats { margin: 0 0 24px; padding: 4px 16px; background: #f6f7f9; border-radius: 16px; text-align: left; }
.ended-stats div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.ended-stats div:last-child { border-bottom: 0; }
.ended-stats dt { color: #50545b; flex: none; }
.ended-stats dd { margin: 0; font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-variant-numeric: tabular-nums; }
.ended-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ended-actions .btn { height: 44px; padding: 0 22px; border-radius: 12px; font-size: 15px; display: inline-flex; align-items: center; text-decoration: none; }
.ended-actions .btn.primary { background: #111; color: #fff; }
.ended-actions .btn.primary:hover { background: #2e2e2e; }
.ended-actions .btn.secondary { background: var(--soft); color: var(--text); }
.ended-actions .btn.secondary:hover { background: #e4e7ec; }

.toasts { position: fixed; left: 50%; bottom: 230px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(20, 24, 40, .92); color: #fff;
  padding: 9px 16px; border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  animation: toastIn .2s ease-out;
}
.toast.out { opacity: 0; transition: opacity .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ============ RESPONSIVE ============ */
.midi-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.midi-btn { min-width: 0; flex-shrink: 1; }
.piano-head { min-width: 0; }

@media (max-width: 1560px) {
  .sec-player { min-width: 0; }
  .player-sliders { padding: 0 10px; gap: 10px; }
  .tb-center { gap: 4px; }
  .tb-btn { min-width: 76px; }
}
@media (max-width: 1360px) {
  .sec-piano { width: clamp(330px, 37vw, 640px); }
  .ps-mm { display: none; }
  .tb-left { gap: 2px; }
  .tb-btn { min-width: 66px; padding: 6px 6px; font-size: 13px; }
  .tb-split .tb-btn { min-width: 88px; padding-right: 26px; }
}
@media (max-width: 1180px) {
  .sec-role { width: 160px; padding: 12px 10px 6px; }
  .segment { width: 136px; }
  .pill-btn { padding: 7px 11px; font-size: 13.5px; }
  .ps-label { font-size: 13px; }
  .tb-btn { min-width: 58px; font-size: 12px; }
}

/* ============ CALL ============ */
.name-tag { display: flex; align-items: center; gap: 5px; }
.name-tag .mic-off { width: 16px; height: 16px; }
.unmute-btn {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff;
  padding: 9px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  z-index: 4;
}
.unmute-btn svg { width: 18px; height: 18px; }
.msg.in { align-self: flex-start; }
.msg.in .meta { text-align: left; }
.msg.in .bubble { background: var(--soft); color: var(--text); border-radius: 14px 14px 14px 4px; }
.p-status { width: 8px; height: 8px; border-radius: 50%; background: #c3c6cc; }
.p-status.on { background: var(--green); }
.people-invite { padding: 4px 16px 16px; }
.people-invite .btn { width: 100%; }
.text-input {
  width: 100%; border: 1px solid #d9dce1; border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 15px; outline: none;
  margin-bottom: 16px;
}
.text-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 0, 0, .08); }
.modal .hint { font-size: 13px; color: var(--muted); margin: -6px 0 16px; }

.sync-status {
  flex: 0 1 auto; min-width: 64px;
  overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; color: var(--blue);
  background: #efefef; border-radius: 6px;
  padding: 2px 8px; white-space: nowrap;
}
.sync-status.busy { color: #111; background: #f3f3f3; }
/* a file on its way («Завантаження… 45%», «в учня… 60%»): the badge fills up like a progress bar */
.sync-status.pct { --p: 0%; flex: none; min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: #111;
  background: linear-gradient(90deg, #d9d9d9 var(--p), #f3f3f3 var(--p)); box-shadow: inset 0 0 0 1px #dcdcdc; }

.player-row .track-name { flex: 0 1 auto; min-width: 90px; }

#chooseFileBtn .lbl-short, #chooseFileBtn .lbl-icon { display: none; }
@media (max-width: 1360px) {
  #chooseFileBtn .lbl-long { display: none; }
  #chooseFileBtn .lbl-short { display: inline; }
  .player-row { gap: 8px; }
  .sync-status { font-size: 11.5px; padding: 2px 6px; }
}

/* End lesson — red pill, icon + label in one row */
.end-btn {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px 0 14px;
  border-radius: 20px;
  background: #e5484d; color: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(229, 72, 77, .35);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.end-btn:hover { background: #d13438; box-shadow: 0 4px 14px rgba(229, 72, 77, .5); }
.end-btn:active { transform: scale(.97); }
.end-btn svg { width: 22px; height: 22px; transform: rotate(0deg); }
@media (max-width: 1180px) {
  .end-btn { padding: 0 14px 0 11px; font-size: 13px; }
}

/* Instrument picker */
.inst-btn {
  --p: 100%;
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex: 0 1 auto;
  padding: 6px 10px 6px 11px;
  background: linear-gradient(90deg, #dde3ff var(--p), var(--soft) var(--p));
}
.inst-btn:hover { background: linear-gradient(90deg, #dcdcdc var(--p), #e4e7ec var(--p)); }
.inst-btn svg { width: 17px; height: 17px; flex: none; }
.inst-btn .caret-down { width: 14px; height: 14px; color: #6b7078; }
.inst-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.midi-btn { flex: none; padding: 6px 12px; }
.inst-list { min-width: 270px; }
.inst-item { align-items: flex-start; }
.inst-item .check { margin-top: 1px; }
.inst-item .inst-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.inst-item .inst-name { font-weight: 500; }
.inst-item .inst-note { font-size: 12px; color: var(--muted); }
.inst-item .inst-status { font-size: 12px; color: var(--blue); white-space: nowrap; margin-top: 1px; }
.inst-item .inst-status.err { color: #d13438; }

/* Key geometry (see buildKeyboard) */
.keyboard { --ww: 24px; --bw: 14px; }
.key.white { width: var(--ww); }
.key.black { width: var(--bw); }

/* The other participant's notes */
.key.white.active-remote { background: linear-gradient(#ffeccd, #ffc97f); border-color: #f0b25c; }
.key.black.active-remote { background: linear-gradient(#f39c2b, #c9740f); }
.key.white.active.active-remote { background: linear-gradient(#dfe5ff 0 50%, #ffc97f 50%); }

/* Expand button */
#pianoExpandBtn .i-collapse { display: none; }
#pianoExpandBtn.active { background: #ececec; color: var(--blue); }
#pianoExpandBtn.active .i-expand { display: none; }
#pianoExpandBtn.active .i-collapse { display: block; }

/* Expanded piano: whole bottom panel, taller, big keys */
.app.piano-big .panel { height: 280px; }
.app.piano-big .panel > .section:not(.sec-piano) { display: none !important; }
.app.piano-big .sec-piano { width: 100%; flex: 1; }
.app.piano-big .piano-head { height: 44px; padding: 6px 16px 2px 12px; gap: 12px; }
.app.piano-big .keyboard-scroll { padding: 6px 12px 0; }
.app.piano-big .key.white { border-radius: 0 0 7px 7px; padding-bottom: 8px; }
.app.piano-big .key.black { height: 60%; border-radius: 0 0 5px 5px; padding-bottom: 7px; }
.app.piano-big .key .kb { font-size: 13px; }
.app.piano-big .key .nn { font-size: 12.5px; }
.app.piano-big .key.black .kb { font-size: 12px; }

/* Narrow piano section: instrument button shows only its icon (full name in the tooltip/menu) */
.sec-piano { container-type: inline-size; container-name: piano; }
/* piano volume on the row above the keys: only the speaker where it's narrow, the slider too where there is room */
.piano-vol { display: flex; align-items: center; gap: 8px; flex: none; }
.pv-btn svg { width: 18px; height: 18px; }
.pv-btn .pv-off, .pv-btn.muted .pv-on { display: none; }
.pv-btn.muted .pv-off { display: inline; }
.pv-btn.muted { color: #e5484d; }
.pv-range, .pv-val { display: none; }
.pv-range { width: 96px; flex: none; min-width: 0; }
.pv-val { width: 34px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-pop { width: 250px; }
@container piano (min-width: 760px) { .pv-range, .pv-val { display: block; } }
@container piano (max-width: 500px) {
  .inst-btn #instLabel { display: none; }
  .inst-btn { padding: 6px 8px; }
}

/* ============ METRONOME ============ */
#metroBtn .tb-icon.beat { animation: beatFlash .14s ease-out; }
#metroBtn .tb-icon.beat-strong { animation: beatFlashStrong .18s ease-out; }
@keyframes beatFlash { 0% { transform: scale(1.12); color: #9fb0ff; } 100% { transform: none; } }
@keyframes beatFlashStrong { 0% { transform: scale(1.22); color: #ffb35c; } 100% { transform: none; } }
#metroBtn.active #metroLabel { font-variant-numeric: tabular-nums; }
.metro { width: 290px; padding: 6px 6px 4px; }
/* the metronome floats: it stays open while playing and is dragged by its top strip */
.metro-card {
  position: fixed; z-index: 90; background: #fff; color: var(--text); font-size: 14px;
  border: 1px solid var(--line); border-radius: 16px; padding: 0 6px 8px;
  box-shadow: 0 14px 40px rgba(15, 20, 40, .22); animation: pop .12s ease-out;
}
.metro-card.dragging { box-shadow: 0 20px 50px rgba(15, 20, 40, .3); }
.metro-head { position: relative; height: 26px; display: grid; place-items: center; cursor: grab; touch-action: none; user-select: none; }
.metro-head:active { cursor: grabbing; }
.metro-grip { width: 36px; height: 4px; border-radius: 2px; background: #d9dce1; }
.metro-x { position: absolute; top: 4px; right: 2px; width: 24px; height: 24px; border-radius: 7px; color: var(--muted); font-size: 18px; line-height: 1; }
.metro-x:hover { background: var(--soft); color: #111; }
.metro-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.metro-step { width: 44px; height: 44px; border-radius: 12px; background: var(--soft); font-size: 24px; line-height: 1; }
.metro-step:hover { background: #e4e7ec; }
.metro-bpm { text-align: center; }
.metro-bpm span#mBpm { display: block; font-size: 40px; font-weight: 600; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.metro-bpm small { font-size: 12px; color: var(--muted); }
.metro .range { width: 100%; margin: 4px 0 12px; }
.metro-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; height: 16px; align-items: center; }
.metro-dots i { width: 12px; height: 12px; border-radius: 50%; background: #dfe2e7; transition: background .06s, transform .06s; }
.metro-dots i.strong { width: 15px; height: 15px; }
.metro-dots i.on { background: var(--blue); transform: scale(1.15); }
.metro-dots.many { gap: 6px; }
.metro-dots.many i { width: 10px; height: 10px; }
.metro-dots.many i.strong { width: 13px; height: 13px; }
.metro-dots i.strong.on { background: #f08a24; }
.metro-meters { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--soft); border-radius: 10px; padding: 3px; margin-bottom: 6px; }
.metro-meters button { padding: 5px 0; border-radius: 7px; font-size: 12.5px; color: #50545b; font-variant-numeric: tabular-nums; }
.metro-meters button.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); font-weight: 500; }
.metro .pop-row { padding: 8px 2px; }
.metro-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 4px; }
.metro-tap { height: 42px; border-radius: 11px; background: var(--soft); font-weight: 500; }
.metro-tap:active { background: #dfe3ea; }
.metro-go { height: 42px; border-radius: 11px; background: var(--blue); color: #fff; font-weight: 600; font-size: 15px; }
.metro-go:hover { background: var(--blue-dark); }
.metro-go.stop { background: #e5484d; }
.metro-where { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; min-height: 16px; line-height: 1.4; }
.store-list { max-height: 50vh; overflow: auto; margin: 0 -6px 14px; }
/* «Мінусовка»: the library's folders and the students' playlists */
.modal:has(.lib-pick) { width: min(470px, calc(100vw - 32px)); }

/* «Завершити урок?» */
.modal:has(.end-lesson) { width: min(380px, calc(100vw - 32px)); padding: 26px 22px 20px; border-radius: 22px; }
.end-lesson { text-align: center; }
.end-lesson .el-logo { display: block; height: 44px; width: auto; margin: 0 auto 18px; }
.end-lesson h2 { font-size: 21px; letter-spacing: -.2px; margin: 0; }
.end-lesson .el-who { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.end-lesson .el-who b { color: var(--text); font-weight: 600; }
.end-lesson .el-for { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.el-card { margin: 18px 0 20px; padding: 16px 14px 14px; background: var(--soft); border-radius: 16px; }
.el-card small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.el-time { display: block; margin: 4px 0 14px; font-size: 38px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
.el-stop { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid #dfe2e7; }
.el-stop span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; background: #fff; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text); }
.el-stop svg { width: 16px; height: 16px; flex: none; }
.el-stop span:last-child svg { color: #f2403c; }
.el-card .el-note { margin-top: 8px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.el-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.el-actions .btn { padding: 12px 10px; border-radius: 12px; font-weight: 600; }
@media (max-width: 420px) {
  .el-card { padding-left: 10px; padding-right: 10px; }
  .el-stop { gap: 4px; }
  .el-stop span { gap: 4px; padding: 5px 8px 5px 7px; font-size: 12.5px; }
  .el-stop svg { width: 14px; height: 14px; }
}
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lp-head h2 { margin: 0; }
.lp-seg { display: inline-flex; padding: 3px; gap: 2px; background: #f1f1ee; border-radius: 11px; }
.lp-seg button { padding: 5px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #50545b; transition: background .14s, color .14s, box-shadow .14s; }
.lp-seg button.on { background: #111; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.lp-search { position: relative; margin-bottom: 8px; }
.lp-search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #9a9994; }
.lp-search input { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid #e6e5e0; border-radius: 11px; font: inherit; font-size: 14px; background: #fafaf8; outline: none; }
.lp-search input:focus { border-color: #111; background: #fff; }
.lp-body { min-height: 120px; max-height: min(50vh, 400px); overflow-y: auto; margin: 0 -8px 12px; padding: 0 4px; }
.lp-grid { display: flex; flex-direction: column; }
/* a folder or a student: one quiet row — icon / photo, name, how many tracks, › */
.lp-card { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 8px; border-radius: 10px; text-align: left; transition: background .12s; }
.lp-card + .lp-card { border-top: 1px solid #f1f0ec; }
.lp-card:hover { background: #f5f5f2; }
.lp-card:hover + .lp-card { border-top-color: transparent; }
.lp-card b { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-card small { flex: none; font-size: 12px; color: #9a9994; }
.lp-card::after { content: "›"; flex: none; margin-left: 2px; font-size: 18px; line-height: 1; color: #c2c1bb; transition: color .12s, transform .12s; }
.lp-card:hover::after { color: #111; transform: translateX(2px); }
.lp-folder { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.lp-folder svg { width: 24px; height: 19px; }
.lp-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #111; color: #fff; font-weight: 600; font-size: 12.5px; }
.lp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-back { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 6px 8px 9px; font-size: 12.5px; color: #8b8a85; border-bottom: 1px solid #efeeea; margin-bottom: 6px; }
.lp-back b { font-size: 14.5px; color: #1d1f23; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-back:hover { color: #111; }
.lp-list { display: flex; flex-direction: column; }
.lp-track { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 10px; text-align: left; transition: background .12s; }
.lp-track:hover { background: #f4f4f1; }
.lp-disc { width: 28px; height: 28px; flex: none; border-radius: 50%; background: radial-gradient(circle, #fff 0 3px, #111 3.5px 7px, #2b2b2b 7.5px 100%); box-shadow: inset 0 0 0 1px #000; }
.lp-tname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lp-tname b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-tname small { font-size: 12px; color: #8b8a85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-play { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: #111; opacity: 0; transform: scale(.85); transition: opacity .12s, transform .12s; }
.lp-track:hover .lp-play, .lp-track:focus-visible .lp-play { opacity: 1; transform: none; }
.lp-empty { padding: 40px 12px; text-align: center; color: #8b8a85; font-size: 14px; line-height: 1.5; }
@media (pointer: coarse) { .lp-play { opacity: 1; transform: none; } }
.store-item .check { color: var(--blue); }
.ended .btn { text-decoration: none; }
.vol-row > span:first-child { width: 64px; flex: none; }
.vol-row .vol-val { width: 38px; flex: none; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Player sliders: centre mark + value bubble */
.range-wrap { position: relative; flex: 1; min-width: 60px; display: flex; align-items: center; }
.range-wrap .range { width: 100%; min-width: 0; }
.range-center {
  position: absolute; left: 50%; top: calc(50% + 5px);
  width: 2px; height: 6px; margin-left: -1px; border-radius: 1px;
  background: #b4b9c2; pointer-events: none; transition: background .12s;
}
.range-center.on { background: var(--blue); }
.range-bubble {
  position: absolute; bottom: calc(100% + 5px); transform: translate(-50%, 3px);
  background: #1d1f23; color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .12s, transform .12s; z-index: 5;
}
.range-bubble::after {
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px;
  border: 4px solid transparent; border-top-color: #1d1f23;
}
.range-wrap.show .range-bubble { opacity: 1; transform: translate(-50%, 0); }
/* «Гучність» held at 0 while the other side is on «Живий звук» (app.js syncVolLock): a click on it says why */
.range-wrap.locked { cursor: not-allowed; }
.range-wrap.locked .range { pointer-events: none; opacity: .4; }

/* ============ STAGE LAYOUT (sheet viewer + tiles, tuner below) ============ */
.stage { display: flex; flex-direction: column; container-type: normal; }
.stage-main { flex: 1; min-height: 0; display: flex; gap: 10px; }
.tiles { flex: 1; min-width: 0; height: auto; container-type: size; }
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .stage-main { padding: 10px 10px 8px; }
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles { flex: 0 0 min(30%, 400px); flex-direction: column; justify-content: flex-start; gap: 10px; padding: 0; }
/* with notes open both videos stack in the side column — also in "Спікер" (the id-based speaker rules
   would otherwise shrink one of them into a tiny floating corner) */
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles .tile,
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles.speaker #remoteTile,
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles.speaker #localTile {
  position: relative; right: auto; bottom: auto; z-index: auto; box-shadow: none;
  width: min(calc(100cqw), calc((100cqh - 10px - var(--dock-space, 0px)) / 2 * 16 / 9));
}
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tile-controls { transform: scale(.85); left: 6px; bottom: 6px; }
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .name-tag { font-size: 14px; padding: 3px 9px; }
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles .swap-btn {
  left: 50%; right: auto; bottom: auto; width: 28px; height: 28px;
  top: calc(min(100cqw * 9 / 16, (100cqh - 10px - var(--dock-space, 0px)) / 2) + 5px); transform: translate(-50%, -50%) rotate(90deg);
}
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles .swap-btn:hover { transform: translate(-50%, -50%) rotate(90deg) scale(1.06); }

/* «Вокал»: someone shares their screen — it takes the stage, the other video stands in a column at the side (and the
   player under it when the panel is tucked away), as with the notes or a YouTube video */
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .stage-main { padding: 10px 10px 8px; }
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles { display: grid; grid-template-columns: minmax(0, 1fr) min(30%, 400px); grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 0; align-items: start; }
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open).presenting-remote .tiles #remoteTile, .app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open).presenting-local .tiles #localTile {
  grid-column: 1; grid-row: 1 / -1; order: 0; position: relative; right: auto; bottom: auto; z-index: auto; box-shadow: none;
  width: 100%; height: 100%; aspect-ratio: auto; align-self: stretch;
}
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open).presenting-remote .tiles #localTile, .app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open).presenting-local .tiles #remoteTile {
  grid-column: 2; grid-row: 1; order: 0; position: relative; right: auto; bottom: auto; z-index: auto; box-shadow: none;
  width: 100%; aspect-ratio: 16 / 9;
}
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles .player-dock { grid-column: 2; grid-row: 3; margin-top: 0; }
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles .swap-btn { display: none; }
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tile-controls { transform: scale(.85); transform-origin: bottom left; }
/* …and the presenter's face (their camera goes into the second picture's place while the screen is shown, app.js
   syncFaceCam) in the same column, not over the screen: the other person on top — under them, or above me */
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles > .cam2 {
  position: relative; right: auto; bottom: auto; z-index: auto; width: 100%; border-radius: 14px; box-shadow: none; cursor: default;
}
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles > .cam2 :is(.cam2-tools, .cam2-resize) { display: none; }
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles > .cam2 .cam2-label { left: 8px; bottom: 8px; font-size: 12px; }
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open).presenting-local .tiles > #localCam2 { grid-column: 2; grid-row: 2; }
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open).presenting-remote .tiles > #remoteCam2 { grid-column: 2; grid-row: 1; }
.app:not(.mode-piano):is(.presenting-remote, .presenting-local):not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open).presenting-remote .tiles:has(> #remoteCam2:not([hidden])) #localTile { grid-row: 2; }
.cam2.face .cam2-close { display: none; } /* (the main camera: switched off with its own button) */

/* ============ SHEET VIEWER ============ */
.sheet { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: #f4f5f8; overflow: hidden; }
.sheet-bar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sheet-name { font-weight: 600; font-size: 14px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-group { display: flex; align-items: center; gap: 2px; background: var(--soft); border-radius: 9px; padding: 2px; }
.sheet-group button { min-width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 16px; padding: 0 6px; }
.sheet-group button:hover:not(:disabled) { background: #e2e5ea; }
.sheet-group button:disabled { color: #c3c6cc; cursor: default; }
.sheet-group button.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); color: var(--blue); }
.sheet-group button svg { width: 18px; height: 18px; }
.sheet-group #sheetPage { font-size: 13px; min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
#sheetPage { cursor: pointer; border-radius: 6px; }
#sheetPage:hover { background: #f1f0ec; }
.sheet-page-input { width: 32px; height: 22px; padding: 0 2px; border: 1px solid #111; border-radius: 6px; background: #fff; color: #111;
  font: inherit; font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; outline: none; }
.sheet-group #sheetZoom { font-size: 12px; min-width: 46px; font-variant-numeric: tabular-nums; }
.sheet-group .sep { width: 1px; height: 18px; background: #d6d9de; margin: 0 4px; }
.sheet-group .ink::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); display: block; }
.sheet-group .ink.active { box-shadow: 0 0 0 2px var(--c) inset, 0 1px 3px rgba(0,0,0,.12); background: #fff; }
.text-btn { font-size: 13px !important; padding: 0 8px !important; }
#sheetOpen { height: 30px; border-radius: 8px; background: var(--soft); }
#sheetClose { width: 30px; height: 30px; border-radius: 8px; color: #666; }
#sheetClose:hover, #sheetOpen:hover { background: #e4e7ec; }
.sheet-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; padding: 12px 16px; }
.sheet-page { position: relative; margin: auto; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.12); flex: none; }
.sheet-page canvas { position: absolute; inset: 0; display: block; }
#inkCanvas { cursor: crosshair; touch-action: none; }
#inkCanvas[data-tool="eraser"] { cursor: cell; }

/* ============ TUNER ============ */
/* «Аналіз голосу» — see the block at the end of this file */

/* ============ EXERCISES ============ */
/* warm-ups: exercise card + one control deck; the list slides out to the side */
.popover.ex-pop { max-width: none; padding: 8px; }
.exr { display: flex; gap: 8px; }
.ex-main { width: 300px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.ex-side { display: none; order: 2; width: 250px; flex: none; flex-direction: column; border-left: 1px solid var(--line); padding-left: 8px; }
.exr.list-open .ex-side { display: flex; animation: exSide .18s ease-out; }
@keyframes exSide { from { opacity: 0; transform: translateX(-10px); } }
.ex-tabs { display: flex; gap: 2px; background: var(--soft); border-radius: 10px; padding: 3px; margin-bottom: 6px; }
.ex-tabs button { flex: 1; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; color: #50545b; white-space: nowrap; }
.ex-tabs button.active { background: #fff; color: #111; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ex-tabs span { color: #c9a227; }
.ex-empty { padding: 22px 12px; text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ex-restore { margin-top: 2px; padding: 6px 10px; border-radius: 9px; text-align: left; font-size: 12.5px; color: var(--muted); }
.ex-restore:hover { background: var(--soft); color: #111; }
.ex-act.star.on { color: #f5b301; opacity: 1; }
.ex-item.active .ex-act.star.on { color: #ffd34d; }
.ex-item.fav { padding-right: 32px; }
.ex-item.fav .ex-acts { display: flex; --row-bg: transparent; }
.ex-item.fav:not(:hover):not(:focus-within) .ex-acts .ex-act:not(.star) { display: none; }
.ex-item.fav:hover .ex-acts, .ex-item.fav:focus-within .ex-acts { --row-bg: var(--soft); }
.ex-item.fav.active .ex-acts { --row-bg: #111; }
.ex-list { max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.ex-item { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.ex-item:hover { background: var(--soft); }
.ex-item.active { background: #111; color: #fff; }
.ex-item.active .ex-hint { color: rgba(255, 255, 255, .6); }
.ex-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ex-name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-hint { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* row actions float over the right end of the row, only on hover — names keep their full width */
.ex-acts { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: none; gap: 1px; padding-left: 18px; border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, transparent, var(--row-bg, var(--soft)) 16px); }
.ex-item:hover .ex-acts, .ex-item:focus-within .ex-acts { display: flex; }
.ex-item.active { --row-bg: #111; }
.ex-act { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: inherit; opacity: .7; }
.ex-act:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.ex-act.del:hover { background: #fde2e2; color: #d13438; }
.ex-act svg { width: 14px; height: 14px; }
.ex-add { margin-top: 8px; padding: 9px 12px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 600; color: #fff; background: #e53935; box-shadow: 0 4px 12px rgba(229, 57, 53, .25); transition: background .12s, transform .12s; }
.ex-add:hover { background: #d32f2f; }
.ex-add:active { transform: scale(.98); }

.ex-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 4px 0; }
.ex-top b { font-size: 15px; font-weight: 600; }
.ex-top span { font-size: 11.5px; color: var(--muted); }
.ex-current { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); text-align: left; transition: border-color .12s, background .12s; }
.ex-current:hover { border-color: #cfd2d8; background: #fafafa; }
.ex-current .ex-name { font-size: 14.5px; font-weight: 600; }
.ex-chev { font-size: 20px; line-height: 1; color: var(--muted); transition: transform .18s; }
.exr.list-open .ex-chev { transform: rotate(180deg); }

.ex-deck { background: var(--soft); border-radius: 14px; padding: 10px 10px 4px; }
.ex-transport { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ex-play { width: 46px; height: 46px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: transform .12s, background .12s; }
.ex-play:hover { background: #2e2e2e; transform: scale(1.04); }
.ex-play svg { width: 20px; height: 20px; }
.ex-play:not(.playing) svg { margin-left: 2px; }
.ex-now { flex: 1; min-width: 0; font-size: 12.5px; color: #50545b; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px; }
.ex-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13.5px; }
.ex-row > span { color: #50545b; white-space: nowrap; width: 74px; flex: none; }
.ex-row .range { flex: 1; }
.ex-row b { width: 38px; text-align: right; font-size: 12.5px; font-weight: 500; color: #50545b; font-variant-numeric: tabular-nums; }
.ex-range { padding: 0 6px; }
.ex-range .ex-arrow { width: auto; color: var(--muted); }
.ex-row select { font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; background: #fff; flex: 1; }
.ex-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 6px; font-size: 13px; cursor: pointer; }
.ex-switch { position: relative; width: 32px; height: 19px; flex: none; }
.ex-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ex-switch i { position: absolute; inset: 0; border-radius: 10px; background: #d9dce1; transition: background .18s; pointer-events: none; }
.ex-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s; }
.ex-switch input:checked + i { background: #111; }
.ex-switch input:checked + i::after { transform: translateX(13px); }
.ex-rec { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: #e53935; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 4px 12px rgba(229, 57, 53, .28); transition: background .12s, transform .12s; }
.ex-rec:hover { background: #d32f2f; }
.ex-rec:active { transform: scale(.98); }
.ex-rec i { width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: none; }
.ex-rec.on { background: #b71c1c; box-shadow: 0 0 0 3px rgba(229, 57, 53, .25); }
.ex-rec.on i { border-radius: 2px; animation: blink 1s infinite; }
/* warm-ups: ensemble, melody hint, folds, mixer, export */
.ex-row select#exBand { flex: 1; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; background: #fff; }
.ex-seg { flex: 1; display: flex; gap: 2px; background: var(--soft); border-radius: 9px; padding: 2px; }
.ex-seg button { flex: 1; padding: 5px 4px; border-radius: 7px; font-size: 12px; color: #50545b; white-space: nowrap; }
.ex-seg button.active { background: #fff; color: #111; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ex-more { border: 1px solid var(--line); border-radius: 12px; padding: 0 8px; }
.ex-more summary { list-style: none; cursor: pointer; padding: 9px 2px; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.ex-more summary::-webkit-details-marker { display: none; }
.ex-more summary::after { content: "›"; font-size: 17px; color: var(--muted); transition: transform .15s; }
.ex-more[open] summary::after { transform: rotate(90deg); }
.ex-more[open] { padding-bottom: 6px; }
.mix-row span { width: 96px !important; font-size: 12.5px; }
.mix-row.quiet span, .mix-row.quiet .range { opacity: .4; }
.mix-btn { width: 24px; height: 22px; border-radius: 6px; border: 1px solid var(--line); font-size: 11px; font-weight: 700; color: #50545b; flex: none; }
.mix-btn:hover { background: var(--soft); }
.mix-btn[data-mute].on { background: #e53935; border-color: #e53935; color: #fff; }
.mix-btn[data-solo].on { background: #f5b301; border-color: #f5b301; color: #111; }
.mix-call { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.mix-call b { width: 42px !important; }
.ex-export { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: #111; background: #fff; }
.ex-export:hover:not(:disabled) { background: var(--soft); }
.ex-export:disabled { opacity: .5; cursor: progress; }
.ex-export svg { width: 16px; height: 16px; }

/* «Своя вправа» dialog options */
.cd-grid { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 14px; margin: 4px 0 18px; font-size: 13.5px; }
.cd-grid > span { color: #50545b; white-space: nowrap; }
.cd-seg { display: flex; flex-wrap: wrap; gap: 2px; background: var(--soft); border-radius: 10px; padding: 3px; }
.cd-seg button { flex: 1; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: #50545b; white-space: nowrap; }
.cd-seg button.active { background: #fff; color: #111; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cd-select { font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; background: #fff; }
.cd-bpm { display: flex; align-items: center; gap: 10px; }
.cd-bpm .range { flex: 1; }
.cd-bpm b { width: 32px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.cd-actions { align-items: center; }
.cd-grid .cd-sec { color: #111; font-weight: 600; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; padding-top: 6px; }
.cd-sec-line { height: 1px; background: var(--line); align-self: center; margin-top: 6px; }
.cd-select:disabled { opacity: .45; }
.cd-grid .cd-top { align-self: start; padding-top: 7px; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-chips button { padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); font-size: 12.5px; background: #fff; color: #2b2e33; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.cd-chips button:hover:not(:disabled) { border-color: #cfd2d8; }
.cd-chips button.on { background: #111; border-color: #111; color: #fff; }
.cd-chips button:disabled { opacity: .35; cursor: default; }
.cd-actions .spacer { flex: 1; }
.cd-listen { display: inline-flex; align-items: center; gap: 7px; }
.cd-listen svg { width: 15px; height: 15px; }
.cd-listen.on { background: #111; color: #fff; }

/* ============ TOOLBAR: fit the extra buttons ============ */
@media (max-width: 1500px) {
  .tb-center { gap: 0; }
  .tb-btn { min-width: 64px; padding: 6px 6px; font-size: 13px; }
  .tb-split .tb-btn { min-width: 90px; }
}
@media (max-width: 1260px) {
  .tb-btn { min-width: 54px; padding: 6px 4px; font-size: 11.5px; }
  .tb-icon svg { width: 23px; height: 23px; }
  .tb-split .tb-btn { min-width: 78px; padding-right: 22px; }
  .end-btn span { display: none; }
  .end-btn { padding: 0 12px; }
}
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .avatar { width: 52px; height: 52px; font-size: 22px; }
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .placeholder { gap: 6px; }
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .ph-text { font-size: 12px; padding: 0 10px; text-align: center; }
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .ph-btn, .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) #copyInviteBtn { font-size: 12px; padding: 5px 10px; }
.app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .name-tag { top: 6px; left: 6px; }
.sheet-name { max-width: 180px; }

/* Expanded piano: all 88 keys; on narrow keys only the C's keep their note names */
.app.piano-big .keyboard-scroll { overflow-x: hidden; }
.keyboard.compact .key .nn { font-size: 10px; }
.keyboard.compact .key.white:not(.c-key) .oct { display: none; }
.keyboard.compact .key .kb { font-size: 11px; }
.keyboard.compact .key.black .kb { font-size: 9.5px; }
.app.piano-big .key.white { border-radius: 0 0 5px 5px; }

/* ============ PREMIUM KEYS ============ */
/* dark key rail with a red felt strip across the top */
.keyboard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; z-index: 4; pointer-events: none;
  background: linear-gradient(#2a2d33, #121418 70%);
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.key { transition: background .06s, box-shadow .06s; }
.key .kb, .key .nn { position: relative; z-index: 1; }

.key.white {
  background: linear-gradient(180deg, #e9e9e9 0, #fbfbfb 9%, #fff 55%, #f6f6f6 100%);
  border: 1px solid #c9c9c9; border-top: 0;
  box-shadow: inset 0 -5px 0 #e3e3e3, inset -1px 0 0 rgba(255,255,255,.9), inset 1px 0 0 rgba(0,0,0,.04);
  padding-bottom: 8px;
}
.key.white:hover { background: linear-gradient(180deg, #e6e6e6 0, #f8f8f8 9%, #fdfdfd 55%, #f1f1f1 100%); }
.key .nn { color: #a0a0a0; font-weight: 400; }
.key.c-key .nn { color: #111; font-weight: 600; }

.key.black {
  background: linear-gradient(180deg, #2c2c2c, #050505);
  border: 1px solid #000; border-top: 0;
  box-shadow: 0 3px 4px rgba(0,0,0,.45), 1px 0 2px rgba(0,0,0,.25);
  padding-bottom: 9px;
  overflow: hidden;
}
/* glossy face */
.key.black::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: 0; bottom: 16%; pointer-events: none;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, #9a9a9a 0%, #5a5a5a 30%, #262626 72%, #141414 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.12), inset -1px 0 0 rgba(0,0,0,.4);
}
/* bevelled tip */
.key.black::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 10%; pointer-events: none;
  border-radius: 3px;
  background: linear-gradient(180deg, #5c5c5c, #262626);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 1px rgba(0,0,0,.6);
}
.key.black .kb { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.7); }

/* pressed: key sinks, front lip gets thinner */
.key.white.active {
  background: linear-gradient(180deg, #b9c4ff 0, #dfe5ff 18%, #ececec 100%);
  border-color: #9fb0f5; box-shadow: inset 0 -2px 0 #bfcaff, inset 0 3px 6px rgba(52,80,236,.25);
}
.key.black.active { background: linear-gradient(180deg, #1f35b8, #0c1860); }
.key.black.active::before { background: linear-gradient(180deg, #9fb0ff 0%, #5a74f5 35%, #2a42d4 80%, #1f35b8 100%); bottom: 13%; }
.key.black.active::after { background: linear-gradient(180deg, #4a63ea, #1f35b8); bottom: 2%; }

.key.white.active-remote {
  background: linear-gradient(180deg, #ffc97f 0, #ffe3b8 18%, #fff0d9 100%);
  border-color: #f0b25c; box-shadow: inset 0 -2px 0 #f5c98a, inset 0 3px 6px rgba(201,116,15,.25);
}
.key.white.active.active-remote { background: linear-gradient(90deg, #dfe5ff 0 50%, #ffe3b8 50%); }
.key.black.active-remote { background: linear-gradient(180deg, #c9740f, #6b3a04); }
.key.black.active-remote::before { background: linear-gradient(180deg, #ffd08a 0%, #f39c2b 40%, #c9740f 100%); bottom: 13%; }
.key.black.active-remote::after { background: linear-gradient(180deg, #e08a1c, #a45c08); bottom: 2%; }

.key.black .nn { color: rgba(255,255,255,.75); font-size: 8.5px; line-height: 1.2; letter-spacing: -.2px; text-shadow: 0 1px 1px rgba(0,0,0,.7); }
.app.piano-big .key.black .nn { font-size: 10px; }
.keyboard.compact .key.black .nn { font-size: 8px; }
.labels-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; }
.labels-btn svg { width: 16px; height: 16px; }
.labels-btn.on { background: #111; color: #fff; }
.labels-btn.on:hover { background: #2e2e2e; }
.labels-btn { padding: 6px 9px; }
.staff-btn { padding: 2px 9px; height: 30px; display: flex; align-items: center; }
.staff-btn .clef { font-size: 21px; line-height: 1; font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Music", serif; }
.staff-btn.on { background: #111; color: #fff; }
.staff-btn.on:hover { background: #2e2e2e; }
/* the grand-staff card */
.staff-card {
  position: absolute; z-index: 15; width: 270px;
  background: #fff; color: #111; border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(15, 20, 40, .22); overflow: hidden;
  transition: opacity .3s;
}
.staff-card.fading svg ellipse, .staff-card.fading svg .acc { opacity: .35; transition: opacity .6s; }
.staff-head { display: flex; align-items: baseline; gap: 8px; min-height: 34px; padding: 10px 10px 0 14px; cursor: grab; user-select: none; touch-action: none; }
.staff-head:active { cursor: grabbing; }
.staff-head b { font-family: "New York", ui-serif, Georgia, serif; font-size: 22px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.staff-card.empty .staff-head b { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.staff-head span { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-close { width: 24px; height: 24px; border-radius: 7px; color: var(--muted); font-size: 18px; line-height: 1; flex: none; align-self: center; }
.staff-close:hover { background: var(--soft); color: #111; }
#staffSvg { display: block; width: 100%; height: 190px; }
.staff-full-btn { display: grid; place-items: center; margin-left: -4px; }
.staff-full-btn svg { width: 14px; height: 14px; }
.staff-full-btn .i-collapse, .staff-full-btn.active .i-expand { display: none; }
.staff-full-btn.active .i-collapse { display: block; }
/* «На весь екран»: the staff becomes the stage's big panel, like the notes — the videos stack at its side */
.staff-card.full { position: relative; left: auto !important; top: auto !important; flex: 1; min-width: 0; width: auto; z-index: auto; display: flex; flex-direction: column; box-shadow: none; }
.app.mode-piano .staff-card.full { border-width: 0 1px 1px 0; border-radius: 0 0 14px 0; }
.staff-card.full .staff-head { cursor: default; padding: 16px 16px 0 18px; }
.staff-card.full .staff-head b { font-size: 34px; }
.staff-card.full.empty .staff-head b { font-size: 15px; }
.staff-card.full .staff-head span { font-size: 15px; }
.staff-card.full #staffSvg { flex: 1; min-height: 0; height: auto; padding: 8px 4% 16px; }
#staffSvg .staff-lines line, #staffSvg .ledger { stroke: #1d1f23; stroke-width: 1; }
#staffSvg .clef-g { font-size: 86px; font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Music", serif; fill: #1d1f23; }
#staffSvg .clef-f { font-size: 54px; font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Music", serif; fill: #1d1f23; }
#staffSvg .acc { font-size: 16px; font-family: "Apple Symbols", "Segoe UI Symbol", serif; }
.app.piano-big .key.white { padding-bottom: 12px; }
.app.piano-big .key.black { padding-bottom: 22px; }

/* Camera menu: quality */
.q-toggle { justify-content: space-between; cursor: pointer; }
.switch.small { width: 34px; height: 20px; }
.q-row { justify-content: space-between; }
.rev-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 14px; }
.rev-seg { display: inline-flex; background: var(--soft); border-radius: 9px; padding: 2px; gap: 2px; }
.rev-seg button { padding: 5px 9px; border-radius: 7px; font-size: 12.5px; color: var(--text-2, #50545b); white-space: nowrap; }
.rev-seg button.active { background: #fff; color: #111; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.q-row .q-cur { margin-left: auto; color: var(--muted); font-size: 13px; }
.q-row .q-caret { width: 14px; text-align: center; color: var(--muted); transition: transform .15s; font-size: 16px; }
.q-row.open .q-caret { transform: rotate(90deg); }
.q-list { margin: 0 0 2px 8px; border-left: 2px solid var(--line); padding-left: 4px; }
.q-now { font-size: 12px; padding-top: 2px; }

/* ============ LESSON MODE: «Вокал» / «Фортепіано» ============ */
.topbar { position: relative; }
.mode-switch {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--soft);
  -webkit-app-region: no-drag;
}
.mode-switch button {
  display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 11px; border-radius: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--text-2); transition: background .15s, color .15s, box-shadow .15s;
}
.mode-switch button:hover { color: var(--text); }
.mode-switch button.active { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
/* a module not in the plan (app.js applyPlanModules): dimmed, a small lock after its name; a click — the card */
.mode-switch button.locked { opacity: .55; }
.mode-switch button.locked::after { content: ''; width: 10px; height: 10px; flex: none; margin-left: 1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.2' fill='black'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.2' fill='black'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.mode-switch button.locked:hover { opacity: .85; }
.popover.lock-pop { width: 280px; padding: 14px; border-radius: 14px; }
.lock-card-h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #111; }
.lock-card-h svg { width: 18px; height: 18px; color: #6b6e75; }
.lock-card p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #50545b; }
.lock-card .btn { width: 100%; margin-top: 12px; justify-content: center; }
.mode-switch svg { width: 14px; height: 14px; }

/* the bottom is all piano, as tall as the screen allows */
.app.mode-piano .panel { height: clamp(220px, 36vh, 400px); }
.app.mode-piano .panel > .section:not(.sec-piano) { display: none !important; }
.app.mode-piano .sec-piano { width: 100%; flex: 1; }
.app.mode-piano #pianoExpandBtn { display: none; }
.app.mode-piano .piano-head { height: 46px; padding: 7px 16px 3px 12px; gap: 12px; }
.app.mode-piano .keyboard-scroll { padding: 9px 14px 0; }
/* a strip of red felt above the keys, and keys with a little depth */
.app.mode-piano .keyboard { box-shadow: 0 -4px 0 #7d1c23; border-radius: 2px 2px 0 0; }
.app.mode-piano .key.white { border-radius: 0 0 8px 8px; padding-bottom: 10px; box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .045); }
.app.mode-piano .key.black { height: 62%; border-radius: 0 0 5px 5px; padding-bottom: 8px; box-shadow: inset 0 -6px 0 rgba(255, 255, 255, .09), 0 2px 3px rgba(0, 0, 0, .35); }
.app.mode-piano .key .kb { font-size: 13px; }
.app.mode-piano .key .nn { font-size: 13px; }
.app.mode-piano .key.black .kb { font-size: 12px; }
.app.mode-piano .keyboard:not(.compact) .key.white.c-key .nn { font-weight: 600; }

/* how many keys fit the width: fewer keys → bigger keys (one button, the choice is in its menu) */
.key-range { display: none; }
.app.piano-big .key-range { display: flex; align-items: center; gap: 4px; padding: 6px 9px 6px 12px; flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.key-range .caret-down { width: 14px; height: 14px; color: #6b7078; }

/* notes open: the notes on the left, both videos together in one column on the right (the same as in «Вокал») */

/* someone shares their screen: it takes the middle, the other video stands at the side */
.app.mode-piano.presenting-remote:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles,
.app.mode-piano.presenting-local:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles { gap: 10px; padding: 10px; }
.app.mode-piano.presenting-remote:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles #remoteTile,
.app.mode-piano.presenting-local:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles #localTile {
  position: relative; right: auto; bottom: auto; z-index: auto; box-shadow: none; order: 2;
  flex: 1 1 auto; width: auto; height: 100%; aspect-ratio: auto;
}
.app.mode-piano.presenting-remote:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles #localTile,
.app.mode-piano.presenting-local:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles #remoteTile {
  position: relative; right: auto; bottom: auto; z-index: auto; box-shadow: none; order: 3;
  flex: 0 0 auto; width: clamp(150px, 17vw, 300px); aspect-ratio: 3 / 4; max-height: 100%;
}
.app.mode-piano.presenting-remote:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles .swap-btn,
.app.mode-piano.presenting-local:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles .swap-btn { display: none; }
.app.mode-piano.presenting-remote:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tile-controls,
.app.mode-piano.presenting-local:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tile-controls { transform: scale(.85); transform-origin: bottom left; }

/* ============ PIANO MODE: the toolbar becomes a strip on the right ============
   It floats over the right edge and hides itself: shown when the mode starts, then slides away;
   bring the mouse to the right edge to get it back (see «side toolbar» in app.js). */
.app.mode-piano { grid-template-rows: 28px minmax(0, 1fr) auto; }
.app.mode-piano .toolbar {
  position: fixed; top: 28px; right: 0; bottom: 0; z-index: 60;
  width: 78px; height: auto; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, visibility 0s linear .3s;
}
.app.mode-piano.bar-shown .toolbar {
  transform: none; visibility: visible; box-shadow: -10px 0 28px rgba(0, 0, 0, .22);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .app.mode-piano .toolbar { transition: none !important; } }
.app.mode-piano .toolbar::-webkit-scrollbar { display: none; }
.app.mode-piano .tb-group { flex-direction: column; align-items: stretch; gap: 2px; }
.app.mode-piano .tb-center { flex: 1; justify-content: center; }
.app.mode-piano .tb-left { padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.app.mode-piano .tb-right { justify-content: center; align-items: center; }
.app.mode-piano .tb-btn,
.app.mode-piano .tb-split .tb-btn { width: 100%; min-width: 0; padding: 7px 2px 6px; gap: 4px; font-size: 11px; }
.app.mode-piano .tb-icon svg { width: 23px; height: 23px; }
.app.mode-piano .tb-icon.emoji { font-size: 23px; }
.app.mode-piano .tb-split .caret { top: 4px; right: 2px; width: 18px; height: 18px; }
.app.mode-piano .tb-split .caret svg { transform: rotate(-90deg); } /* the menu opens to the left now */
.app.mode-piano .end-btn { width: 52px; height: 52px; padding: 0; border-radius: 50%; justify-content: center; }
.app.mode-piano .end-btn span { display: none; }
/* the edge you point at to bring the strip back, with a small handle as a hint */
.bar-edge { display: none; }
.app.mode-piano .bar-edge {
  display: block; position: fixed; top: 28px; right: 0; bottom: 0; width: 14px; z-index: 59; cursor: pointer;
}
.app.mode-piano .bar-edge::after {
  content: ""; position: absolute; right: 3px; top: 50%; width: 4px; height: 56px; margin-top: -28px;
  border-radius: 2px; background: rgba(17, 17, 17, .22); transition: background .15s, height .15s;
}
.app.mode-piano .bar-edge:hover::after { background: rgba(17, 17, 17, .5); }
.app.bar-shown .bar-edge::after { opacity: 0; }

.kr-note { color: var(--muted); font-size: 13px; }
.kl-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; white-space: nowrap; }
.kl-text .kr-note { font-size: 12px; }

/* piano mode: hide / show the controls row above the keys */
.head-toggle, .pbar-btn, .piano-tb { display: none; }
.app.mode-piano .head-toggle {
  display: grid; place-items: center; position: absolute; z-index: 5;
  top: 9px; left: 12px; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid #d9dce1; background: #fff; color: #2b2e33;
  transition: background .12s, top .2s, border-radius .2s;
}
.app.mode-piano .head-toggle:hover { background: var(--soft); }
.app.mode-piano .head-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.app.mode-piano .piano-head { padding-left: 52px; }
/* hidden: the keys keep their size, the freed height goes to the presentation above;
   the button becomes a tab on the panel's top edge */
.app.mode-piano.piano-head-hidden .panel { height: calc(clamp(220px, 36vh, 400px) - 46px); }
.app.mode-piano.piano-head-hidden .piano-head { display: none; }
.app.mode-piano.piano-head-hidden .head-toggle {
  top: -25px; height: 24px; width: 44px; border-radius: 9px 9px 0 0; border-bottom: 0;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, .06);
}
.app.mode-piano.piano-head-hidden .head-toggle svg { transform: rotate(180deg); }


/* ============ NOTES: the toolbar is a slim, quiet column on the right (both modes); the page gets the height ============ */
.vb-ico { display: none; }
.app .sheet { flex-direction: row; }
.app .sheet-bar {
  order: 2; flex: none; width: 62px; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 2px;
  padding: 8px 4px; border-bottom: 0; border-left: 1px solid var(--line-2); background: #fff;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.app .sheet-bar::-webkit-scrollbar { display: none; }
.app .sheet-name { display: none; } /* the file name is in the tooltip of «Інші ноти» */
/* groups without grey plates — just a hairline between them */
.app .sheet-group { flex-direction: column; width: 100%; background: none; padding: 0; gap: 2px; }
.app .sheet-bar > .sheet-group { position: relative; padding-top: 7px; margin-top: 5px; }
.app .sheet-bar > .sheet-group::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 22px; margin-left: -11px; height: 1px; background: var(--line);
}
.app .sheet-group button {
  width: 100%; min-width: 0; height: 30px; padding: 0; border-radius: 8px; color: #5b6068;
  transition: background .12s, color .12s;
}
.app .sheet-group button:hover:not(:disabled) { background: var(--soft); color: #111; }
.app .sheet-group button:disabled { color: #cfd2d7; cursor: default; }
.app .sheet-group button svg { width: 17px; height: 17px; }
/* pages and zoom in one row each: ‹ 1 / 7 ›  and  − 75% + */
.app .sheet-bar > .sheet-group:not(.tools) { display: grid; grid-template-columns: 11px 1fr 11px; gap: 0; align-items: center; }
.app .sheet-bar > .sheet-group:not(.tools) > * { height: 26px; font-size: 14px; }
.app .sheet-bar > .sheet-group:not(.tools) > button:not(#sheetZoom) { border-radius: 6px; color: #8b9098; }
.app .sheet-bar > .sheet-group:not(.tools) > button:not(#sheetZoom):hover:not(:disabled) { background: none; color: #111; }
.app .sheet-bar > .sheet-group:not(.tools) > #sheetPage,
.app .sheet-bar > .sheet-group:not(.tools) > #sheetZoom {
  display: grid; place-items: center; min-width: 0; padding: 0; overflow: visible; white-space: nowrap;
  font-size: 10px; font-weight: 500; letter-spacing: -.2px; color: #2b2e33; font-variant-numeric: tabular-nums;
}
/* pens, colours and «clear» in one column */
.app .sheet-group.tools .sep { width: 16px; height: 1px; margin: 4px auto; background: var(--line); }
.app .sheet-group button.active { background: #111; color: #fff; box-shadow: none; }
.app .sheet-group button.active:hover { background: #2e2e2e; color: #fff; }
.app .sheet-group .ink::before { width: 12px; height: 12px; }
.app .sheet-group .ink.active { background: none; box-shadow: none; }
.app .sheet-group .ink.active::before { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px var(--c); }
.app .sheet-group .ink.active:hover { background: var(--soft); }
.app .sheet-bar .spacer { flex: 1; }
/* «Доступ для учнів» (teacher only): a tick with its words under it in the slim column */
.sheet-access {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 36px; flex: none;
  margin: 8px auto 0; padding: 4px 0 3px; border-radius: 8px; cursor: pointer; color: #5b6068; transition: background .12s, color .12s;
}
.sheet-access input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sheet-access .acc-ico { width: 17px; height: 17px; }
.sheet-access span { font-size: 9px; line-height: 1.1; }
.sheet-access:hover { background: var(--soft); color: #111; }
.sheet-access:has(input:checked) { background: #111; color: #fff; }
.sheet-access:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 1px; }
/* the student without access only looks */
.sheet.view-only .sheet-group.tools { display: none; }
.sheet.view-only #inkCanvas { pointer-events: none; cursor: default; }
.app .vb-ico { display: block; width: 17px; height: 17px; }
.app .text-btn .lbl { display: none; }
.app .text-btn { padding: 0 !important; }
.app #sheetOpen, .app #sheetClose {
  width: 36px; height: 32px; display: grid; place-items: center; flex: none; background: none; color: #8b9098; border-radius: 8px;
}
.app #sheetOpen:hover, .app #sheetClose:hover { background: var(--soft); color: #111; }
.app #sheetClose { order: -1; font-size: 15px; } /* ✕ on top, then pages and zoom */
/* «Закрити ноти»: a red ring, easy to find; filled red on hover */
.app #sheetClose { box-shadow: inset 0 0 0 1.5px #e5484d; color: #e5484d; transition: background .14s, color .14s; }
.app #sheetClose:hover { background: #e5484d; color: #fff; }
.app #sheetClose { width: 28px; height: 28px; font-size: 12px; border-radius: 7px; margin: 2px auto 4px; } /* a little smaller than the other buttons */

/* own microphone / camera on your video: the teacher always, the student in piano mode */
.own-av { display: none; }
.app.mode-piano .own-av, .app.is-teacher .own-av { display: grid; }

/* piano mode, notes open: the notes reach right up to the top bar — no margin, no frame line above them */
.app.mode-piano:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .stage-main { padding: 0 8px 6px 0; }
.app.mode-piano.sheet-open .sheet { border-width: 0 1px 1px 0; border-radius: 0 0 14px 0; }
.app.mode-piano.sheet-open .sheet-scroll { padding: 0 12px 8px; }
.app.mode-piano.sheet-open .sheet-page { margin: 0 auto auto; } /* the page starts right under the top bar's line */
.app.mode-piano:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles { padding-top: 8px; }

/* pressed keys: clearly visible, still calm — a see-through grey-blue, deeper towards the front edge, a slight «pushed in» shade */
.keyboard .key.white.active {
  background: linear-gradient(rgba(125, 148, 196, .28), rgba(98, 122, 176, .55) 72%, rgba(88, 112, 166, .62)); border-color: #9aaccd;
  box-shadow: inset 0 4px 7px rgba(30, 45, 80, .16);
}
.keyboard .key.white.active .kb, .keyboard .key.white.active .nn { color: #1f2a44; }
.keyboard .key.black.active { background: linear-gradient(#6b7ea8, #465782); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .3); }
/* the other participant's notes: warm amber in the same manner */
.keyboard .key.white.active-remote {
  background: linear-gradient(#ffd89e, #f5a640 72%, #ec9528); border-color: #ec9528;
  box-shadow: inset 0 4px 7px rgba(110, 60, 0, .2);
}
.keyboard .key.white.active-remote .kb, .keyboard .key.white.active-remote .nn { color: #fff; }
.keyboard .key.black.active-remote { background: linear-gradient(#f5a640, #c9740f); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .3); }
.keyboard .key.white.active.active-remote { background: linear-gradient(90deg, rgba(98, 122, 176, .55) 50%, #f5a640 50%); border-color: #9aaccd; }

/* metronome: «Звучить у Учня / Вчителя» — shown only in piano mode (in «Вокал» the «Синхронне звучання» panel does it) */
.metro-host { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0 2px; font-size: 13.5px; }
.metro-host > span { flex: none; color: var(--text-2); }
.metro-host-seg { flex: 1; grid-template-columns: 1fr 1fr; margin: 0; }
.metro-host-seg button { padding: 6px 0; font-size: 13.5px; }

/* «Вокал»: the tab that hides / shows the music panel — sits on the panel's top edge, left */
.panel-toggle {
  position: absolute; left: 12px; bottom: 0; z-index: 6;
  width: 44px; height: 24px; display: grid; place-items: center;
  border: 1px solid #d9dce1; border-bottom: 0; border-radius: 9px 9px 0 0; background: #fff; color: #2b2e33;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, .06); transition: background .12s;
}
.panel-toggle:hover { background: var(--soft); }
.panel-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.panel-toggle.collapsed svg { transform: rotate(180deg); }
.app.mode-piano .panel-toggle { display: none; } /* piano mode has its own tab above the keys */


/* ============ «АНАЛІЗ ГОЛОСУ» (the tuner): the presentation area, videos at its side ============ */
.vl {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden;
}
.app.mode-piano.tuner-open .vl { border-width: 0 1px 1px 0; border-radius: 0 0 14px 0; }
.vl-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 52px 8px 16px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.vl-title { font-size: 15px; font-weight: 600; letter-spacing: -.1px; white-space: nowrap; }
.vl-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--soft); flex-wrap: wrap; }
.vl-tabs button { height: 28px; padding: 0 11px; border-radius: 8px; font-size: 13px; color: var(--text-2); white-space: nowrap; transition: background .15s, color .15s; }
.vl-tabs button:hover { color: var(--text); }
.vl-tabs button.active { background: #fff; color: #111; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.vl-spacer { flex: 1; }
.vl-who { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--soft); }
.vl-who button { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; color: var(--text-2); }
.vl-who button.active { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.vl-hist span .vl-dot { display: inline-block; margin-right: 5px; vertical-align: 1px; }
.vl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.vl-dot.student { background: #d6409f; }
.vl-dot.teacher { background: #1d1f23; }
.vl-select { height: 30px; font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; background: #fff; color: var(--text-2); }
/* ✕ always in the top right corner, red like «Закрити ноти» — however the head wraps */
.vl-close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 8px; font-size: 13px; color: #e5484d; box-shadow: inset 0 0 0 1.5px #e5484d; transition: background .14s, color .14s; }
.vl-close:hover { background: #e5484d; color: #fff; }

.vl-body { flex: 1; min-height: 0; display: flex; }
.vl-main { position: relative; flex: 1; min-width: 0; padding: 10px 6px 8px 10px; }
.vl-main #pitchCanvas { width: 100%; height: 100%; display: block; }
.vl-overlay { position: absolute; left: 62px; top: 14px; display: flex; gap: 8px; align-items: center; }
.vl-chip { height: 26px; padding: 0 10px; border-radius: 99px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); font-size: 12px; color: var(--text-2); box-shadow: 0 2px 6px rgba(0, 0, 0, .05); }
.vl-chip:hover { color: #111; border-color: #cfd2d8; }
.vl-chip.on { background: #111; color: #fff; border-color: #111; }
.vl-review { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); font-size: 12px; font-variant-numeric: tabular-nums; }
.vl-review input { width: 220px; accent-color: #111; }

.vl-side { width: 212px; flex: none; overflow-y: auto; padding: 8px; border-left: 1px solid var(--line-2); background: #fbfbfc; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.vl-card { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; }
.vl-card.vl-accent { border-color: #cfe8d9; background: #f6fbf8; }
.vl-card h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.vl-big { display: flex; align-items: baseline; gap: 8px; }
.vl-big b { font-size: 26px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.vl-big span { font-size: 12.5px; color: var(--text-2); }
.vl-line { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--text); }
.vl-sub { margin: 4px 0 0; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.vl-note { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.vl-empty { margin: 0; font-size: 12.5px; color: var(--muted); }
.vl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.vl-nchip { display: inline-flex; gap: 4px; align-items: baseline; padding: 2px 7px; border-radius: 99px; font-size: 11.5px; font-variant-numeric: tabular-nums; background: var(--soft); color: var(--text-2); }
.vl-nchip b { color: var(--text); font-weight: 600; }
.vl-nchip.good { background: #e7f6ee; color: #1f7a45; }
.vl-nchip.warn { background: #fff4e0; color: #9a6200; }
.vl-nchip.bad { background: #fdecec; color: #b3261e; }
.vl-pair { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.vl-pair b { color: var(--text); font-variant-numeric: tabular-nums; }
.vl-card .good, .vl-now-row .good { color: #1f9d55; } .vl-card .warn, .vl-now-row .warn { color: #c7810a; } .vl-card .bad, .vl-now-row .bad { color: #d13438; }
.vl-now-row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 2px 8px; padding: 4px 0; }
.vl-now-row + .vl-now-row { border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 8px; }
.vl-now-row .n { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-now-row b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.vl-now-row .c { font-size: 12px; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.vl-now-row.off { opacity: .45; }
.vl-gauge { grid-column: 2 / -1; position: relative; height: 5px; border-radius: 3px; margin: 4px 0 2px; background: linear-gradient(90deg, #f6d4d4, #fbe8c8 30%, #d8f0e1 42%, #d8f0e1 58%, #fbe8c8 70%, #f6d4d4); }
.vl-gauge .z { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #9aa0a8; border-radius: 1px; }
.vl-gauge .needle { position: absolute; top: -4px; width: 4px; height: 13px; margin-left: -2px; border-radius: 2px; background: #1d1f23; transition: left .08s linear; }
.vl-gauge .needle.good { background: #1f9d55; } .vl-gauge .needle.warn { background: #c7810a; } .vl-gauge .needle.bad { background: #d13438; }
.vl-seg { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--soft); align-self: flex-start; }
.vl-seg button { height: 24px; padding: 0 10px; border-radius: 6px; font-size: 12px; color: var(--text-2); }
.vl-seg button.active { background: #fff; color: #111; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.vl-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vl-metric { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vl-metric.wide { grid-column: 1 / -1; }
.vl-metric small { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.vl-metric b { font-size: 20px; font-weight: 650; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.vl-metric em { font-style: normal; font-size: 11.5px; color: var(--text-2); line-height: 1.35; }
.vl-pill { display: inline-flex; padding: 5px 11px; border-radius: 99px; font-size: 13px; font-weight: 500; }
.vl-pill.good { background: #e7f6ee; color: #1f7a45; } .vl-pill.warn { background: #fff4e0; color: #9a6200; } .vl-pill.mute { background: var(--soft); color: var(--text-2); }
.vl-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.vl-btn { height: 32px; padding: 0 12px; border-radius: 9px; background: var(--soft); font-size: 13px; font-weight: 500; color: var(--text); transition: background .15s; }
.vl-btn:hover:not(:disabled) { background: #e4e7ec; }
.vl-btn.primary { background: #111; color: #fff; }
.vl-btn.primary:hover:not(:disabled) { background: #2e2e2e; }
.vl-btn.done { background: #e7f6ee; color: #1f7a45; }
.vl-btn.busy { opacity: .6; pointer-events: none; }
.vl-btn:disabled, .vl-step:disabled, .vl-mini button:disabled { opacity: .4; cursor: default; }
.vl-picker { display: flex; align-items: center; gap: 10px; }
.vl-step { width: 34px; height: 34px; border-radius: 10px; background: var(--soft); font-size: 18px; flex: none; }
.vl-step:hover:not(:disabled) { background: #e4e7ec; }
.vl-pick { flex: 1; text-align: center; display: flex; flex-direction: column; }
.vl-pick b { font-size: 22px; font-weight: 650; }
.vl-pick small { font-size: 12px; color: var(--text-2); }
.vl-mini { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 9px; background: var(--soft); font-size: 12.5px; }
.vl-mini span { padding: 0 6px; font-variant-numeric: tabular-nums; }
.vl-mini button { width: 26px; height: 26px; border-radius: 7px; }
.vl-mini button:hover:not(:disabled) { background: #e2e5ea; }
.vl-hist { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line-2); font-size: 12.5px; }
.vl-hist:first-child { border-top: 0; }
.vl-hist span { color: var(--text-2); }
.vl-hist b { font-variant-numeric: tabular-nums; }
.vl-hist em { font-style: normal; color: var(--muted); font-size: 12px; }
.vl-hist.ok em { color: #1f9d55; } .vl-hist.miss em { color: #d13438; }
@media (max-width: 1250px) { .vl-side { width: 196px; } .vl-tabs button { padding: 0 8px; font-size: 12.5px; } }
/* the side panel, calmer: a tab's icon, tiles of numbers, short words (pitch.js, renderSide) */
.vl-head { flex-wrap: nowrap; }
.vl { container-type: inline-size; }
@container (max-width: 900px) { .vl-title { display: none; } }
@container (max-width: 760px) { .vl-tabs button svg { display: none; } .vl-tabs button { padding: 0 9px; } }
@container (max-width: 600px) { .vl-who button { padding: 0 7px; gap: 4px; } .vl-tabs button { padding: 0 7px; font-size: 12px; } .vl-head { gap: 8px; } }
.vl-tabs { flex-wrap: nowrap; }
.vl-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.vl-tabs button svg { width: 15px; height: 15px; flex: none; opacity: .7; }
.vl-tabs button.active svg { opacity: 1; }
.vl-select { width: auto; padding: 0 4px; }
.vl-card { border-radius: 14px; padding: 12px 14px; }
.vl-card h4 { margin-bottom: 6px; }
.vl-big em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--soft); color: var(--text-2); white-space: nowrap; }
.vl-big em.good { background: #e7f6ee; color: #1f7a45; } .vl-big em.warn { background: #fff4e0; color: #9a6200; }
.vl-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.vl-bar i { display: block; height: 100%; border-radius: 3px; background: #1f9d55; transition: width .3s; }
.vl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vl-stat { min-width: 0; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 1px; }
.vl-stat small { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.vl-stat b { font-size: 17px; font-weight: 650; letter-spacing: -.2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-stat em { font-style: normal; font-size: 11px; color: var(--text-2); min-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-stat .good { color: #1f9d55; } .vl-stat .warn { color: #c7810a; } .vl-stat .bad { color: #d13438; }
.vl-card.vl-verdict { padding: 10px; display: flex; justify-content: center; }
.vl-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.vl-legend li { display: grid; grid-template-columns: 8px auto 1fr; align-items: center; gap: 8px; }
.vl-legend i { width: 8px; height: 8px; border-radius: 50%; }
.vl-legend i.good { background: #1f9d55; } .vl-legend i.warn { background: #c7810a; } .vl-legend i.bad { background: #d13438; }
.vl-legend span { color: var(--text-2); }
.vl-iv .vl-picker { margin-bottom: 10px; }
.vl-pick b { font-size: 26px; letter-spacing: -.3px; }
.vl-ivopts { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vl-ivopts .vl-seg button { height: 26px; width: 34px; padding: 0; font-size: 15px; }
.vl-legend li { white-space: nowrap; }
.vl-ivopts .vl-mini span { min-width: 30px; text-align: center; font-weight: 600; }
.vl-btn.wide { width: 100%; height: 36px; }
.vl-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.4; }

/* «Завершити урок»: a red circle with the icon only (the name is in the tooltip), in both modes */
.end-btn { width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; }
.end-btn span { display: none; }

/* a phone held upright sends a tall picture — shown whole (see app.js), never cropped to 16:9 */
.tile-video.portrait { object-fit: contain; background: #111; }

/* ============ PHONES ============
   Everything above is the computer layout; these rules only apply on small screens (the same queries as
   phonePortrait / phoneLandscape in app.js). */

/* ---- touch screens: no hover, fingers instead of a mouse ---- */
@media (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; }
  button, label, .key, .tile, .more-tile { -webkit-tap-highlight-color: transparent; }
  button { touch-action: manipulation; } /* no double-tap zoom on buttons */
  /* iOS zooms into any text field under 16px */
  .chat-form input, .text-input, .vl-select, .ex-row select, .cd-select { font-size: 16px; }
  .key .kb { display: none; } /* the computer-keyboard letters mean nothing here */
  .ex-item .ex-acts { display: flex; } /* the row actions are otherwise shown on hover */
}

/* ---- phone upright (and any narrow window) ---- */
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .app, .app.mode-piano {
    min-width: 0; height: 100vh; height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-columns: minmax(0, 1fr); /* (the screen's width, never what's inside: the bar and the panel scroll or wrap) */
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  }

  /* top bar: mode switch on the left, timer and view on the right */
  .topbar { height: calc(44px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0; -webkit-app-region: no-drag; }
  .traffic { display: none; }
  /* the two mode icons in the middle; the student's language to the left, the timer and the view to the right */
  .mode-switch { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 22px); transform: translate(-50%, -50%); padding: 3px; border-radius: 10px; }
  .topbar .tour-btn { display: none; } /* (no «Екскурсія» on a phone) */
  .topbar .lang-btn { position: absolute; left: 10px; top: calc(env(safe-area-inset-top) + 22px); transform: translateY(-50%); } /* (the student's language, next to it) */
  .topbar { justify-content: flex-end; }
  /* «Вокал» / «Фортепіано»: just the two icons, bigger (the names stay for screen readers and the tooltip) */
  .mode-switch button { width: 46px; height: 32px; padding: 0; justify-content: center; gap: 0; font-size: 0; border-radius: 8px; }
  .mode-switch svg { width: 20px; height: 20px; }
  .topbar .mode-switch button:not(.active) { color: #2b2e33; }
  .topbar-right { gap: 6px; }
  .timer { font-size: 13px; padding: 4px 9px; }
  .view-btn svg { width: 22px; height: 22px; }

  /* videos one under the other */
  .tiles { flex-direction: column; gap: 8px; padding: 6px; }
  .tile { width: min(calc(100cqw - 12px), calc((100cqh - 20px) / 2 * 16 / 9)); border-radius: 12px; }
  /* the two videos, one under the other, from edge to edge: each the whole width and half the height (the picture fills it) */
  .app:not(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open, .presenting-remote, .presenting-local) .tiles:not(.speaker, .quad) > .tile { width: 100cqw; height: calc((100cqh - 20px) / 2); aspect-ratio: auto; }
  .tiles .swap-btn { width: 34px; height: 34px; }
  .tiles .swap-btn svg { transform: rotate(90deg); }
  .tiles.swapped .swap-btn svg { transform: rotate(270deg); }
  .name-tag { top: 8px; left: 8px; font-size: 13px; padding: 3px 9px; border-radius: 8px; }
  .avatar { width: 52px; height: 52px; font-size: 23px; }
  .placeholder { gap: 6px; font-size: 12.5px; padding: 0 12px 30px; text-align: center; }
  .ph-btn { font-size: 12.5px; padding: 6px 12px; }
  /* a short video tile: just the avatar and a line — the buttons are in «More» and on the toolbar too */
  .tile { container-type: size; }
  @container (max-height: 170px) { .placeholder .ph-btn { display: none; } }
  @container (max-height: 110px) { .placeholder .ph-text { display: none; } .avatar { width: 40px; height: 40px; font-size: 18px; } }
  .tc-btn { width: 32px; height: 32px; }

  /* «Спікер»: one video on the whole stage, the other small in the corner */
  /* the big one on the whole stage, the small one wherever a finger puts it (placePip) — a tap on it trades them */
  .tiles.speaker #remoteTile, .tiles.speaker.swapped #localTile { width: 100cqw; height: calc(100cqh - 12px); aspect-ratio: auto; }
  .tiles.speaker:not(.swapped) #localTile, .tiles.speaker.swapped #remoteTile {
    left: var(--pip-l, auto); top: var(--pip-t, auto); right: 10px; bottom: 10px;
    width: 30cqw; height: auto; aspect-ratio: 3 / 4; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; transition: none;
  }
  .tiles.speaker:is([style*="--pip-l"]):not(.swapped) #localTile, .tiles.speaker:is([style*="--pip-l"]).swapped #remoteTile { right: auto; bottom: auto; }
  .tiles.speaker:not(.swapped) #localTile .tile-controls, .tiles.speaker.swapped #remoteTile .tile-controls { display: none; }
  .tiles.speaker .swap-btn { display: none; }
  .tiles.speaker .swap-btn svg { transform: none; }
  .tiles.speaker.swapped .swap-btn svg { transform: rotate(180deg); }

  /* notes / voice analysis open: the two videos in a strip on top, the page below */
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .stage-main,
  .app.mode-piano:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .stage-main { flex-direction: column; padding: 6px; gap: 6px; }
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles,
  .app.mode-piano:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles { order: -1; flex: 0 0 clamp(84px, 15vh, 130px); flex-direction: row; justify-content: center; gap: 6px; padding: 0; }
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles .tile,
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles.speaker #remoteTile,
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles.speaker #localTile { width: min(calc((100cqw - 6px) / 2), calc(100cqh * 16 / 9)); }
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles .swap-btn { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; }
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles .swap-btn:hover { transform: translate(-50%, -50%) scale(1.06); }
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tiles .swap-btn svg { transform: none; }
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tile-controls { transform: scale(.78); left: 4px; bottom: 4px; }
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .name-tag { font-size: 11.5px; padding: 2px 7px; top: 4px; left: 4px; }
  .app:is(.sheet-open, .tuner-open, .yt-open, .staff-open, .board-open) .tile-signal { display: none; }
  .app.mode-piano.sheet-open .sheet, .app.mode-piano.tuner-open .vl { border-width: 1px; border-radius: 12px; }
  .app.mode-piano.sheet-open .sheet-scroll { padding: 8px; }
  .app.mode-piano.sheet-open .sheet-page { margin: 0 auto auto; }

  /* «Фортепіано», someone shows their screen: it on top, the other video below */
  .app.mode-piano.presenting-remote:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles,
  .app.mode-piano.presenting-local:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles { flex-direction: column; padding: 6px; gap: 6px; }
  .app.mode-piano.presenting-remote:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles #remoteTile,
  .app.mode-piano.presenting-local:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles #localTile { flex: 1 1 0; width: 100%; height: auto; min-height: 0; }
  .app.mode-piano.presenting-remote:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles #localTile,
  .app.mode-piano.presenting-local:not(.sheet-open):not(.tuner-open):not(.yt-open):not(.staff-open, .board-open) .tiles #remoteTile { flex: none; width: auto; height: 28%; aspect-ratio: 16 / 9; max-width: 100%; }

  /* sheet music bar: one row that scrolls sideways, icons instead of words */
  .sheet-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 6px 8px; }
  .sheet-bar::-webkit-scrollbar { display: none; }
  .sheet-bar > * { flex: none; }
  .sheet-name { display: none; }
  .vb-ico { display: block; width: 17px; height: 17px; }
  .text-btn .lbl { display: none; }
  .sheet-scroll { padding: 8px; }

  /* «Аналіз голосу»: the tabs on their own scrolling row, the readouts under the graph */
  .vl-head { gap: 8px; padding: 8px 46px 8px 8px; }
  .vl-close { top: 8px; right: 8px; }
  .vl-title { font-size: 14px; }
  .vl-spacer { display: none; }
  .vl-who { margin-left: auto; }
  .vl-tabs { order: 10; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vl-tabs::-webkit-scrollbar { display: none; }
  .vl-tabs button { flex: none; }
  .vl-body { flex-direction: column; }
  .vl-main { min-height: 150px; padding: 8px 4px 6px 6px; }
  .vl-overlay { left: 14px; top: 12px; flex-wrap: wrap; }
  .vl-review input { width: 110px; }
  .vl-side { width: auto; max-height: 45%; border-left: 0; border-top: 1px solid var(--line-2); }

  /* chat / participants: the whole screen */
  .drawer {
    position: fixed; inset: 0; width: auto; z-index: 150; border: 0; border-radius: 0; box-shadow: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .drawer-head { padding: 10px 12px; }
  .dtab { padding: 7px 16px; font-size: 15px; }
  .drawer-close { width: 36px; height: 36px; font-size: 17px; }

  /* music panel: the sections one under the other; it never takes more than about half the screen */
  .panel { height: auto; max-height: 52vh; max-height: 52dvh; flex-direction: column; overflow-y: auto; border-top: 0; }
  .section { border-right: 0; border-top: 1px solid var(--line); }
  .panel-toggle { left: 12px; margin-left: 0; width: 36px; height: 20px; border-radius: 8px 8px 0 0; }
  .panel-toggle svg { width: 14px; height: 14px; }

  .sec-role { width: auto; flex-direction: row; justify-content: space-between; gap: 12px; padding: 6px 10px; }
  .seg-btn.active::after { display: none; }
  .segment { width: auto; flex-direction: row; }
  .seg-btn { height: 30px; padding: 0 12px; font-size: 13px; }

  .sec-player { min-width: 0; }
  .player-top { padding: 5px 0 0 10px; }
  .player-row { gap: 8px; height: 42px; padding-right: 10px; }
  .player-row .track-name { min-width: 0; flex: 1 1 auto; }
  #chooseFileBtn .lbl-long { display: none; }
  #chooseFileBtn .lbl-short { display: inline; }
  /* YouTube and «Файл»: two square icon buttons */
  .player-row :is(#ytBtn, #chooseFileBtn) { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; flex: none; }
  .player-row #ytBtn .lbl-long, .player-row #chooseFileBtn .lbl-short { display: none; }
  .player-row #ytBtn svg { width: 19px; height: 19px; }
  .player-row #chooseFileBtn .lbl-icon { display: block; width: 18px; height: 18px; }
  .loop-btn { width: 34px; height: 34px; }
  /* the player tighter: less air between the row, the wave and the sliders */
  .wave-row { height: 30px; margin-top: 2px; padding-right: 10px; }
  .player-sliders { padding: 5px 8px 7px; gap: 10px; margin-top: 1px; }
  .ps { gap: 4px; }
  .ps-label { font-size: 12.5px; }
  .ps-mm { display: none; }
  .range { height: 26px; } /* a bigger target for the thumb */
  .range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7.5px; }

  .sec-piano { width: auto; height: 158px; flex: none; }
  .piano-head { height: 42px; padding: 4px 10px 0 8px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .piano-head::-webkit-scrollbar { display: none; }
  .piano-head > * { flex-shrink: 0; }
  .midi-btn { display: none; } /* MIDI keyboards are for computers */
  .app.piano-big .key-range { display: none; } /* the keys keep a finger's width anyway — ‹ › scrolls to the rest */
  .piano-head .octave, .piano-head .pedal-btn { order: -1; } /* the controls a finger needs most come first */
  .piano-head .spacer { display: none; }
  .octave { height: 32px; }
  .octave button { width: 34px; }
  .pedal-btn { width: 34px; height: 32px; }
  .keyboard { --ww: 34px; --bw: 21px; }
  .keyboard-scroll { padding: 4px 0 0; }
  .key .nn { font-size: 11.5px; }

  /* piano expanded (⤢) in «Вокал», and «Фортепіано»: the keys keep a finger's width and scroll */
  .app.piano-big .sec-piano { height: 230px; }
  .app.piano-big .keyboard-scroll { overflow-x: auto; padding: 6px 8px 0; }
  .app.mode-piano .panel { height: clamp(200px, 34vh, 320px); max-height: none; overflow: visible; } /* the tab above the keys sticks out */
  .app.mode-piano.piano-head-hidden .panel { height: calc(clamp(200px, 34vh, 320px) - 46px); }
  .app.mode-piano .sec-piano { height: auto; flex: 1; }
  .app.mode-piano .piano-head { height: 46px; padding: 7px 10px 3px 50px; }
  .app.mode-piano .keyboard-scroll { padding: 8px 8px 0; }
  .app.mode-piano .head-toggle { left: 10px; }

  /* the buttons: always a bar at the bottom (also in «Фортепіано»), scrolling sideways; «Завершити» stays in view */
  .app .toolbar, .app.mode-piano .toolbar {
    position: relative; top: auto; right: auto; bottom: auto; z-index: 5;
    width: auto; height: calc(62px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom) 4px;
    display: flex; flex-direction: row; align-items: center; gap: 0;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    transform: none; visibility: visible; box-shadow: none; transition: none;
  }
  .app .toolbar::-webkit-scrollbar { display: none; }
  .app .tb-group, .app.mode-piano .tb-group { flex-direction: row; align-items: center; gap: 0; flex: none; }
  .app .tb-left, .app.mode-piano .tb-left { padding: 0 4px 0 0; margin-right: 4px; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .12); }
  .app .tb-center, .app.mode-piano .tb-center { flex: 1 0 auto; justify-content: flex-start; }
  .app .tb-right, .app.mode-piano .tb-right {
    position: sticky; right: 0; align-self: stretch; align-items: center; padding: 0 8px 0 14px;
    background: linear-gradient(90deg, rgba(17, 17, 17, 0), var(--toolbar) 12px);
  }
  .app .tb-btn, .app.mode-piano .tb-btn { width: auto; min-width: 0; padding: 6px 5px; gap: 4px; font-size: 10.5px; }
  .app .tb-split .tb-btn, .app.mode-piano .tb-split .tb-btn { min-width: 60px; padding: 6px 17px 6px 7px; } /* (as wide as the others — evenly spaced) */
  .app .tb-center > .tb-btn { flex: 1 1 0; } /* (the buttons share the bar's width — all of them in view, «Більше» too) */
  .app .tb-icon svg, .app.mode-piano .tb-icon svg { width: 23px; height: 23px; }
  .app .tb-icon.emoji, .app.mode-piano .tb-icon.emoji { font-size: 22px; }
  .app .tb-split .caret, .app.mode-piano .tb-split .caret { top: 5px; right: 0; width: 20px; height: 20px; }
  .app.mode-piano .tb-split .caret svg { transform: none; }
  .app .end-btn, .app.mode-piano .end-btn { width: 40px; height: 40px; }
  .app .end-btn svg { width: 20px; height: 20px; }
  /* the piano's bar on a phone: no full-screen piano, octave arrows, pedal, key labels' menu or staff — the keys scroll
     with a finger and keep their note names */
  #pianoExpandBtn, .app .piano-head .octave, #pedalBtn, #labelsBtn, #staffBtn { display: none; }
  #loopBtn, #markBtn { display: none; } /* the player on a phone: no repeat or marks (the teacher's computer has them) */
  /* «Вокал»: the piano hidden at first — the videos get its room; «Піаніно» on the bottom bar brings it */
  .app:not(.mode-piano) .tb-btn.piano-tb { display: flex; }
  .app:not(.mode-piano):not(.piano-on) .sec-piano { display: none; }
  /* «Вокал»: the row above the keys tucked away — the keys take its height; a round button on them brings it back */
  .app:not(.mode-piano) .sec-piano { position: relative; }
  .app:not(.mode-piano):not(.pbar-open) .piano-head { display: none; }
  .app:not(.mode-piano) .pbar-btn {
    display: grid; place-items: center; position: absolute; right: 8px; top: 10px; z-index: 3;
    width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #111;
    border: 1px solid var(--hair, #e6e5e0); box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  }
  .app:not(.mode-piano).pbar-open .pbar-btn { background: #111; color: #fff; border-color: #111; }
  .app:not(.mode-piano).pbar-open .piano-head {
    position: absolute; right: 8px; top: 48px; z-index: 4;
    flex-direction: column; align-items: center; gap: 6px; height: auto; padding: 6px; overflow: visible;
    background: #fff; border: 1px solid var(--hair, #e6e5e0); border-radius: 18px; box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transform-origin: top center; animation: pbar-drop .16s ease-out;
  }
  .app:not(.mode-piano).pbar-open .piano-head .pill-btn { padding: 6px 8px; }
  @keyframes pbar-drop { from { opacity: 0; transform: translateY(-8px) scaleY(.8); } }
  .pbar-btn svg { width: 17px; height: 17px; }
  .app .bar-edge { display: none !important; }

  /* menus and dialogs fit the screen */
  .popover { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  /* the microphone's and the camera's menus: narrower, smaller type, less air */
  .popover.dev-pop { width: min(292px, calc(100vw - 16px)); min-width: 0; padding: 4px; font-size: 13px; }
  .dev-pop .pop-title { font-size: 10.5px; padding: 5px 8px 3px; }
  .dev-pop .pop-item { padding: 6px 8px; gap: 8px; }
  .dev-pop .pop-text { font-size: 11px !important; padding: 2px 8px 4px; }
  .dev-pop .pop-row { padding: 6px 8px; }
  .dev-pop .pop-sep { margin: 3px 4px; }
  .dev-pop .out-seg { margin: 2px 6px 4px; }
  .dev-pop .out-seg button { height: 26px; font-size: 11.5px; padding: 0 4px; }
  .dev-pop .sync-adj { padding: 4px 8px 6px; }
  .dev-pop .sync-head { font-size: 12.5px; margin-bottom: 4px; }
  .dev-pop .sync-step { width: 24px; height: 24px; font-size: 14px; }
  .dev-pop .sync-ends { font-size: 10.5px; }
  .dev-pop .cam2-sub { font-size: 10.5px; }
  .exr { flex-direction: column; }
  .ex-main { width: min(300px, calc(100vw - 32px)); }
  .ex-side { order: 0; width: auto; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 8px; }
  .ex-list { max-height: 34vh; }
  .phrase-list { max-width: calc(100vw - 40px); }
  .more-grid { grid-template-columns: repeat(3, minmax(0, 88px)); }
  /* «Більше»: two screens side by side, a swipe apart, and two dots under them */
  .more-pages { display: flex; width: 272px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .more-pages::-webkit-scrollbar { display: none; }
  .more-pages > .more-grid { flex: 0 0 100%; align-content: start; scroll-snap-align: start; grid-template-columns: repeat(3, minmax(0, 88px)); }
  .more-dots { display: flex; justify-content: center; gap: 6px; padding-top: 8px; }
  .more-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .3); }
  .more-dots button.on { background: #fff; }
  .modal { max-height: calc(100dvh - 32px); }
  .toasts { top: calc(56px + env(safe-area-inset-top)); bottom: auto; }
  .ended-card { padding: 28px 20px 22px; border-radius: 22px; }
  .staff-card { width: 240px; }
  #staffSvg { height: 168px; }
}

/* ---- phone turned sideways: little height, so the buttons stand in a column on the right ---- */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .app, .app.mode-piano {
    min-width: 0; height: 100vh; height: 100dvh;
    grid-template-rows: 32px minmax(0, 1fr) auto;
    padding-left: env(safe-area-inset-left); padding-right: calc(66px + env(safe-area-inset-right));
  }
  .topbar { -webkit-app-region: no-drag; }
  .traffic { display: none; }
  .mode-switch { left: 10px; transform: translateY(-50%); }
  .mode-switch button { height: 24px; }
  .topbar-right { margin-left: auto; }

  .app .toolbar, .app.mode-piano .toolbar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
    width: calc(66px + env(safe-area-inset-right)); height: auto;
    padding: calc(6px + env(safe-area-inset-top)) calc(4px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) 4px;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
    transform: none; visibility: visible; box-shadow: none; transition: none;
  }
  .app .toolbar::-webkit-scrollbar { display: none; }
  .app .tb-group, .app.mode-piano .tb-group { flex-direction: column; align-items: stretch; gap: 2px; }
  .app .tb-left, .app.mode-piano .tb-left { padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .app .tb-center, .app.mode-piano .tb-center { flex: 1 0 auto; justify-content: flex-start; }
  .app .tb-right, .app.mode-piano .tb-right {
    position: sticky; bottom: 0; justify-content: center; align-items: center; padding: 10px 0 2px;
    background: linear-gradient(rgba(17, 17, 17, 0), var(--toolbar) 10px);
  }
  .app .tb-btn, .app .tb-split .tb-btn,
  .app.mode-piano .tb-btn, .app.mode-piano .tb-split .tb-btn { width: 100%; min-width: 0; padding: 6px 2px 5px; gap: 3px; font-size: 10px; }
  .app .tb-icon svg, .app.mode-piano .tb-icon svg { width: 22px; height: 22px; }
  .app .tb-icon.emoji, .app.mode-piano .tb-icon.emoji { font-size: 21px; }
  .app .tb-split .caret, .app.mode-piano .tb-split .caret { top: 3px; right: 0; width: 18px; height: 18px; }
  .app .tb-split .caret svg, .app.mode-piano .tb-split .caret svg { transform: rotate(-90deg); } /* its menu opens to the left */
  .app .end-btn, .app.mode-piano .end-btn { width: 44px; height: 44px; }
  .app .bar-edge { display: none !important; }

  .tiles { padding: 0 4px; gap: 8px; }
  .name-tag { top: 6px; left: 6px; font-size: 12.5px; padding: 3px 8px; }
  .avatar { width: 56px; height: 56px; font-size: 24px; }
  .placeholder { gap: 6px; font-size: 12.5px; text-align: center; padding: 0 10px 30px; }
  .ph-btn { font-size: 12.5px; padding: 6px 12px; }
  .drawer { top: 6px; right: 6px; bottom: 6px; width: min(330px, 48vw); }

  /* the music panel in one low row */
  .panel { height: 116px; }
  .sec-role { width: 118px; padding: 8px; gap: 0; }
  .segment { width: 102px; }
  .seg-btn { height: 32px; font-size: 13px; }
  .seg-btn.active::after { display: none; }
  .sec-player { min-width: 0; }
  .player-row .track-name { min-width: 0; flex: 1 1 auto; }
  .loop-btn { width: 26px; }
  .player-top { padding: 4px 0 0 10px; }
  .player-row { height: 36px; gap: 6px; }
  .play-btn { width: 36px; height: 36px; }
  #chooseFileBtn .lbl-long { display: none; }
  #chooseFileBtn .lbl-short { display: inline; }
  .wave-row { height: 26px; }
  .wave { height: 24px; }
  .player-sliders { padding: 0 8px; gap: 8px; }
  .ps { gap: 2px; }
  .ps-label { font-size: 11.5px; }
  .ps-mm { display: none; }
  .sec-piano { width: 38vw; }
  .piano-head { height: 34px; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .piano-head::-webkit-scrollbar { display: none; }
  .piano-head > * { flex-shrink: 0; }
  .midi-btn { display: none; }
  .app.piano-big .key-range { display: none; }
  .piano-head .octave, .piano-head .pedal-btn { order: -1; }
  .piano-head .spacer { display: none; }
  .app:not(.piano-big) .octave { display: flex; }
  .keyboard { --ww: 30px; --bw: 18px; min-height: 0; }

  .app.piano-big .panel { height: 170px; }
  .app.piano-big .keyboard-scroll { overflow-x: auto; }
  .app.mode-piano .panel { height: clamp(150px, 46vh, 210px); }
  .app.mode-piano.piano-head-hidden .panel { height: calc(clamp(150px, 46vh, 210px) - 40px); }
  .app.mode-piano .piano-head { height: 40px; padding: 5px 10px 2px 50px; }
  .app.mode-piano .head-toggle { top: 5px; }

  .vl-side { width: 210px; }
  .sheet-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sheet-bar::-webkit-scrollbar { display: none; }
  .sheet-bar > * { flex: none; }
  .popover { max-height: calc(100dvh - 16px); }
  .toasts { bottom: auto; top: 44px; }
}

/* ---------- knocking: the student's waiting screen, the teacher's banners ---------- */
.lobby { position: fixed; inset: 0; z-index: 350; display: grid; place-items: center; padding: 20px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: lobby-in .25s ease-out; }
@keyframes lobby-in { from { opacity: 0; } }
.lobby-card { width: min(380px, 100%); text-align: center; padding: 32px 26px 28px; border-radius: 26px; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #262626 0%, #121212 58%, #090909 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.lobby-card h2 { margin: 18px 0 8px; font-family: "New York", ui-serif, Georgia, serif; font-size: 26px; font-weight: 600; letter-spacing: -.3px; }
.lobby-card p { margin: 0; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .68); }
.lobby-door { position: relative; width: 64px; height: 84px; margin: 0 auto; border-radius: 10px 10px 3px 3px; border: 2px solid rgba(255, 255, 255, .9); animation: knock 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
.lobby-door span { position: absolute; right: 10px; top: 44px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.lobby-door i { position: absolute; left: 8px; right: 8px; top: 8px; height: 26px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, .35); }
@keyframes knock { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-3deg); } 72% { transform: rotate(2deg); } 78% { transform: rotate(-2deg); } 84% { transform: rotate(1deg); } }
.lobby-dots { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.lobby-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .8); animation: dot 1.2s ease-in-out infinite; }
.lobby-dots i:nth-child(2) { animation-delay: .15s; }
.lobby-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.knocks { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); z-index: 420; display: flex; flex-direction: column; gap: 10px; width: min(520px, calc(100% - 24px)); }
/* a knock must be seen at once: a black card (the room's own style) with a white pulse around it */
.knock {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #2c2c2c 0%, #111 55%, #050505 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .14) inset;
  animation: knock-in .35s cubic-bezier(.2, .9, .3, 1.25), knock-glow 1.6s ease-in-out .35s infinite;
}
@keyframes knock-in { from { opacity: 0; transform: translateY(-18px) scale(.95); } }
@keyframes knock-glow {
  0% { box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 0 0 rgba(17, 17, 17, .45), 0 0 0 1px rgba(255, 255, 255, .14) inset; }
  70%, 100% { box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 0 12px rgba(17, 17, 17, 0), 0 0 0 1px rgba(255, 255, 255, .14) inset; }
}
.knock.busy { opacity: .7; pointer-events: none; }
.knock-av {
  position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #111; font-size: 20px; font-weight: 800;
}
/* a little door on the avatar that knocks */
.knock-av::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85);
  animation: knuckle 1.1s ease-out infinite;
}
/* two rings out of the avatar — tuk-tuk */
@keyframes knuckle { 0% { transform: scale(1); opacity: .9; } 40% { transform: scale(1.35); opacity: 0; } 41% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
.knock-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.knock-text b { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knock-text span { font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.knock button { flex: none; height: 40px; padding: 0 16px; border-radius: 13px; border: 0; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: transform .12s, background .15s; }
.knock button:active { transform: scale(.96); }
.knock-no { background: rgba(255, 255, 255, .12); color: #fff; }
.knock-no:hover { background: rgba(255, 255, 255, .2); }
.knock-yes { background: #fff; color: #111; }
.knock.next { opacity: .85; } .knock.next .knock-av::after { display: none; } /* (waits for the lesson to end — knocks no more) */
.knock-yes:hover { background: #e9e9e9; }
@media (max-width: 480px) { .knock { flex-wrap: wrap; } .knock-text { flex-basis: calc(100% - 62px); } .knock button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .lobby-door, .lobby-dots i, .knock, .knock-av::after { animation: none; } }

/* =====================================================================
   PREMIUM LOOK — one black-and-white style for the whole lesson room:
   a warm paper panel, hairline dividers, white chips with a fine border,
   black when on, small spaced capitals for captions, fine sliders.
   ===================================================================== */
:root { --paper: #f7f6f3; --hair: #e6e5e0; --chip: #fff; --chip-line: #e1e0db; --caption: #8b8e94; }

/* top bar: the mode switch and the timer as quiet chips, the chosen mode black */
.topbar { background: #fff; border-bottom-color: var(--hair); }
.mode-switch { background: #f1f0ec; border: 1px solid var(--hair); border-radius: 10px; padding: 2px; }
.mode-switch button { border-radius: 8px; color: #6b6e74; }
.mode-switch button:hover { color: #111; }
.mode-switch button.active { background: linear-gradient(180deg, #2a2a2a, #0d0d0d); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 3px 8px rgba(0, 0, 0, .2); }
.timer { background: #f1f0ec; border: 1px solid var(--hair); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #111; letter-spacing: .02em; }

/* the music panel: warm paper, hairlines between the sections */
.panel { background: #fff; border-top-color: var(--hair); }
.section { border-right-color: var(--hair); }
.player-sliders { border-top-color: var(--hair); }
.panel-toggle { background: #fff; border-color: var(--hair); color: #111; box-shadow: 0 -4px 10px rgba(0, 0, 0, .05); }
.panel-toggle:hover { background: #f7f6f3; }

/* one chip for every tool: white, fine border, black when on */
.pill-btn, .pedal-btn, .octave, .icon-plain {
  background: var(--chip); border: 1px solid var(--chip-line); color: #111;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.pill-btn { border-radius: 12px; font-weight: 600; font-size: 13.5px; }
.pill-btn:hover { background: #111; border-color: #111; color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .16); }
.pill-btn:active, .pedal-btn:active, .icon-plain:active { transform: scale(.95); }
.pill-btn .caret-down, .inst-btn .caret-down { color: currentColor; opacity: .55; }
.labels-btn.on, .staff-btn.on, .pedal-btn.on, #pianoExpandBtn.active {
  background: linear-gradient(180deg, #2a2a2a, #0d0d0d); border-color: #0d0d0d; color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 4px 10px rgba(0, 0, 0, .2);
}
.labels-btn.on:hover, .staff-btn.on:hover { background: #2e2e2e; }
/* the instrument chip also shows the loading of a sound: the white part grows */
.inst-btn { background: linear-gradient(90deg, #fff var(--p), #efeee9 var(--p)); }
.inst-btn:hover { background: #111; color: #fff; }
.midi-btn.connected { border-color: #111; }
.pedal-btn, .icon-plain { width: 32px; height: 32px; border-radius: 11px; }
.icon-plain svg { width: 18px; height: 18px; }
.icon-plain:hover, .pedal-btn:hover { background: #f1f0ec; color: #111; border-color: var(--chip-line); }
.octave { height: 32px; border-radius: 11px; overflow: hidden; }
.octave button:hover { background: #f1f0ec; }
.octave span { border-color: var(--hair); font-weight: 600; }
.transpose-chip { border-radius: 11px; height: 32px; }

/* sliders: captions in small spaced capitals, a fine black line and a white knob */
.ps-label { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--caption); }
.ps-mm { color: var(--caption); font-size: 11px; }
.range { height: 18px; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #111 var(--p), #e2e1dc var(--p)); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: #e2e1dc; }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: #111; }
.range::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -6px; border: 1px solid #d6d5d0; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 0 0 3px rgba(17, 17, 17, .0); transition: box-shadow .15s, transform .12s;
}
.range:hover::-webkit-slider-thumb { box-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 0 0 4px rgba(17, 17, 17, .08); }
.range::-moz-range-thumb { width: 14px; height: 14px; border: 1px solid #d6d5d0; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }

/* avatars on the video: the teacher a black disc, the student a pearl one — no colours */
.avatar-student { background: radial-gradient(circle at 35% 28%, #ffffff 0%, #ecebe7 60%, #d9d8d3 100%); color: #111; box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .6) inset; }
.avatar-teacher { background: radial-gradient(circle at 35% 28%, #3a3a3a 0%, #151515 60%, #000 100%); color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .12) inset; }

/* ---------- «Звук: Авто · Навушники · Колонки», the status line, the tips ---------- */
.out-seg { display: flex; gap: 3px; margin: 2px 8px 6px; padding: 3px; border-radius: 11px; background: #f1f0ec; border: 1px solid var(--hair, #e6e5e0); }
.out-seg button { flex: 1; height: 30px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #55585e; white-space: nowrap; transition: background .15s, color .15s; }
.out-seg button:hover { color: #111; }
.out-seg4 { display: grid; grid-template-columns: 1fr 1fr; }
.out-seg button.on { background: linear-gradient(180deg, #2a2a2a, #0d0d0d); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
/* «бета» on «Колонки» — this room tries the new speakers' sound (rtc.js speakersBeta) */
.beta-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: #ffe7a3; color: #5e4200; font-size: 9.5px; font-weight: 700; line-height: 15px; vertical-align: 1px; }
.sound-status { font-size: 12px; color: var(--muted); padding-top: 0; }
.sound-now { font-size: 13px; color: var(--muted); margin: -4px 0 14px; }
.sound-tips { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 12px; }
.sound-tips li { font-size: 14px; line-height: 1.45; }
.sound-tips b { display: block; font-weight: 600; color: #111; margin-bottom: 2px; }
.sound-tips span { color: #50545b; }
.sound-tip {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 410; display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 24px); padding: 10px 10px 10px 16px; border-radius: 16px; color: #fff; font-size: 14px;
  background: rgba(17, 17, 17, .96); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); animation: knock-in .3s ease-out;
}
.sound-tip button { flex: none; height: 34px; padding: 0 13px; border-radius: 11px; font-weight: 600; font-size: 13.5px; background: #fff; color: #111; }
.sound-tip .sound-tip-x { width: 34px; padding: 0; background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 560px) { .sound-tip { flex-wrap: wrap; bottom: 80px; } }

/* ---------- a YouTube video on half the stage ---------- */
.ytview { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #0b0b0b; border: 1px solid #1c1c1c; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.yt-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: #fff; background: linear-gradient(180deg, #1c1c1c, #111); border-bottom: 1px solid rgba(255, 255, 255, .08); flex-wrap: wrap; }
.yt-logo svg { width: 22px; height: 22px; display: block; }
.yt-modes-seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.yt-modes-seg button { height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .65); transition: background .15s, color .15s; }
.yt-modes-seg button:hover { color: #fff; }
.yt-modes-seg button.on { background: #fff; color: #111; }
.yt-hint { flex: 1; min-width: 0; font-size: 12px; color: rgba(255, 255, 255, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-close { width: 30px; height: 30px; flex: none; margin-left: auto; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; }
.yt-close:hover { background: rgba(255, 255, 255, .2); }
.yt-close svg { width: 14px; height: 14px; }
.yt-frame { flex: 1; min-height: 0; position: relative; }
/* «Фортепіано»: the video's own row instead of the modes (youtube.js) */
.yt-piano { display: none; align-items: center; gap: 6px; }
.app.mode-piano .yt-piano { display: flex; }
.app.mode-piano .yt-modes-seg { display: none; }
.yt-ctrl[hidden] { display: none; }
.yt-ctrl { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 4px 0 6px; font-size: 12.5px; color: rgba(255, 255, 255, .75); cursor: pointer; user-select: none; }
.yt-ctrl input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.yt-ctrl i { position: relative; width: 28px; height: 16px; flex: none; border-radius: 8px; background: rgba(255, 255, 255, .22); transition: background .15s; }
.yt-ctrl i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; }
.yt-ctrl input:checked + i { background: #34c759; }
.yt-ctrl input:checked + i::after { transform: translateX(12px); }
.yt-ctrl input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; }
.yt-frame iframe, .yt-frame > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-btn { display: flex; align-items: center; gap: 6px; }
.yt-btn svg { width: 17px; height: 17px; flex: none; }
.yt-btn.active { background: linear-gradient(180deg, #2a2a2a, #0d0d0d); border-color: #0d0d0d; color: #fff; }
.yt-err { color: #d13438; font-size: 13px; margin: 6px 0 0; }
/* the YouTube button with a video open: another one's link right in the menu, «Закрити відео» under it (youtube.js ytMenu) */
.popover.yt-pop { width: 290px; padding: 8px; border-radius: 12px; }
.yt-pop-row { display: flex; gap: 6px; }
.yt-pop-in { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid #e2e1dc; border-radius: 9px; background: #fff; font-size: 12.5px; color: var(--text); }
.yt-pop-in:focus { outline: none; border-color: #111; }
.yt-pop-go { flex: none; height: 32px; padding: 0 12px; border-radius: 9px; background: #111; color: #fff; font-size: 12.5px; font-weight: 600; }
.yt-pop-go:hover { background: #333; }
.yt-pop-err { margin: 6px 2px 0; font-size: 11.5px; color: #d13438; }
.yt-pop-err[hidden] { display: none; }
.yt-pop-sep { height: 1px; background: var(--line); margin: 8px 0 4px; }
.yt-pop-close { color: #d13438; font-size: 13px; padding: 7px 8px; }
.yt-pop-close svg { width: 15px; height: 15px; flex: none; }
.yt-pop-close:hover { background: #fdecec; }
/* «Нещодавні» in «Відео з YouTube»: the videos opened in the lessons, a row each (youtube.js askYouTube) */
.yt-recent { margin-top: 14px; }
.yt-recent-h { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.yt-recent-list { max-height: 316px; overflow-y: auto; margin: 0 -6px; }
.yt-rec { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; cursor: pointer; outline: none; }
.yt-rec:hover, .yt-rec:focus-visible { background: var(--soft); }
.yt-rec.on { background: var(--soft); box-shadow: inset 0 0 0 1.5px #111; }
.yt-rec-img { position: relative; flex: none; width: 96px; height: 54px; border-radius: 6px; overflow: hidden; background: #e9ebee; }
.yt-rec-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-rec-img b { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.78); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.yt-rec-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.yt-rec-t { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-rec-m { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-rec-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: #9a9ea6; font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; }
.yt-rec:hover .yt-rec-x, .yt-rec:focus-within .yt-rec-x { opacity: 1; }
.yt-rec-x:hover { background: #e4e7ec; color: #111; }
@media (pointer: coarse) { .yt-rec-x { opacity: 1; } }
.yt-rec-none { font-size: 13px; color: var(--muted); padding: 8px 6px; }
.app.mode-piano.yt-open .ytview { border-radius: 0 0 14px 0; }
@media (max-width: 1360px) { .yt-btn .lbl-long { display: none; } }

/* ⇄ on the video's bar while a screen is shown too (app.js syncPresBig) */
.yt-swap { display: inline-flex; align-items: center; gap: 6px; height: 30px; flex: none; padding: 0 11px 0 9px; border-radius: 15px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .12); transition: background .15s; }
.yt-swap[hidden] { display: none; }
.yt-swap:hover { background: rgba(255, 255, 255, .22); }
.yt-swap svg { width: 15px; height: 15px; flex: none; transition: transform .3s; }
.yt-swap.on svg { transform: rotate(180deg); }
.yt-swap + .yt-close { margin-left: 0; }
/* …the screen big: it takes the stage on the left; on the right the other person's camera, the video under it, the
   player at the bottom when it's docked. (The videos' box steps aside — its pictures join this grid — so the video's
   frame never moves in the page and keeps playing.) */
.app.pres-big .stage-main { display: grid; grid-template-columns: minmax(0, 1fr) min(30%, 400px); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.app.pres-big .tiles { display: contents; }
.app.pres-big.yt-open .tiles .swap-btn, .app.pres-big .quad-split { display: none; }
.app.pres-big.yt-open.presenting-local .tiles #localTile, .app.pres-big.yt-open.presenting-remote .tiles #remoteTile {
  grid-column: 1; grid-row: 1 / -1; order: 0; position: relative; right: auto; bottom: auto; z-index: auto; box-shadow: none;
  width: 100%; height: 100%; aspect-ratio: auto; align-self: stretch;
}
.app.pres-big.yt-open.presenting-local .tiles #remoteTile, .app.pres-big.yt-open.presenting-remote .tiles #localTile {
  grid-column: 2; grid-row: 1; order: 0; position: relative; right: auto; bottom: auto; z-index: auto; box-shadow: none;
  width: 100%; aspect-ratio: 16 / 9;
}
.app.pres-big.yt-open .ytview { grid-column: 2; grid-row: 2; flex: none; width: 100%; max-height: 100%; border-radius: 14px; }
.app.pres-big.yt-open .yt-frame { flex: 0 1 auto; aspect-ratio: 16 / 9; min-height: 0; }
.app.pres-big .yt-hint, .app.pres-big .yt-logo { display: none; }
.app.pres-big .yt-bar { gap: 6px; padding: 6px 8px; flex-wrap: nowrap; }
.app.pres-big .yt-modes-seg button { padding: 0 8px; font-size: 11.5px; }
.app.pres-big .yt-swap { margin-left: auto; width: 30px; padding: 0; justify-content: center; }
.app.pres-big .yt-swap span { display: none; }
.app.pres-big .tiles .player-dock { grid-column: 2; grid-row: 4; margin-top: 0; }

/* the notes and a YouTube video at once: the notes on the left the whole height; on the right the video on top and
   both videos side by side under it (the player docks under them when the panel is tucked away). The videos' row is
   as tall as they are (the column's width decides it), the video above takes all the rest */
.app.sheet-open.yt-open .stage-main { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.app.sheet-open.yt-open .sheet { grid-column: 1; grid-row: 1 / span 2; }
.app.sheet-open.yt-open .ytview { grid-column: 2; grid-row: 1; border-radius: 14px; }
.app.sheet-open.yt-open .tiles { grid-column: 2; grid-row: 2; container-type: inline-size; height: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.app.sheet-open.yt-open .tiles .tile,
.app.sheet-open.yt-open .tiles.speaker #remoteTile,
.app.sheet-open.yt-open .tiles.speaker #localTile { width: calc((100cqw - 10px) / 2); }
.app.sheet-open.yt-open .tiles .swap-btn { top: calc((100cqw - 10px) / 4 * 9 / 16); transform: translate(-50%, -50%); }
.app.sheet-open.yt-open .tiles .swap-btn:hover { transform: translate(-50%, -50%) scale(1.06); }
.app.sheet-open.yt-open .tiles .swap-btn svg { transform: none; }
.app.sheet-open.yt-open .tiles.swapped .swap-btn svg { transform: rotate(180deg); }
/* a phone: the strip of videos on top as with the notes alone, then the video, then the notes */
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .app.sheet-open.yt-open .stage-main { display: flex; }
  .app.sheet-open.yt-open .ytview { flex: 0 0 34%; }
  .app.sheet-open.yt-open .tiles { container-type: size; flex-wrap: nowrap; }
  .app.sheet-open.yt-open .tiles .tile,
  .app.sheet-open.yt-open .tiles.speaker #remoteTile,
  .app.sheet-open.yt-open .tiles.speaker #localTile { width: min(calc((100cqw - 6px) / 2), calc(100cqh * 16 / 9)); }
  .app.sheet-open.yt-open .tiles .swap-btn { top: 50%; }
}

#peerVolBtn.off { color: #ff6b6b; }

/* «Звук учня» */
.snd-line { font-size: 12px; color: var(--muted); padding-top: 0; max-width: 340px; }
.snd-row > span:first-child { width: 96px; flex: none; font-size: 13px; }
.snd-meter { flex: 1; display: flex; gap: 2px; height: 10px; }
.snd-meter i { flex: 1; border-radius: 1.5px; background: #e2e1dc; transition: background .05s; }
.snd-meter i.on { background: #111; }
.snd-meter i.hot { background: #d13438; }
.snd-seg { margin: 0; flex: 1; }
.snd-hint { font-size: 11.5px; color: var(--muted); padding-top: 0; max-width: 340px; }
/* under «Гучність»: where is quieter, as it is, louder (0 sits at the 50% mark of −12…+12) */
/* «Новий звук для колонок» in «Звук учня» */
.snd-switch { position: relative; width: 38px; height: 22px; flex: none; margin-left: auto; cursor: pointer; }
.snd-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.snd-switch i { position: absolute; inset: 0; border-radius: 99px; background: #d9d8d3; transition: background .2s; }
.snd-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.snd-switch input:checked + i { background: #111; }
.snd-switch input:checked + i::after { transform: translateX(16px); }
.snd-switch input:disabled + i { opacity: .45; }
.snd-switch input:focus-visible + i { outline: 2px solid #111; outline-offset: 2px; }

/* The music panel as three cards — «Учень / Вчитель», the player, the piano — on a soft ground, gaps between them.
   (Not in «Фортепіано» and not with the piano expanded: there the keys take the whole width.) */
.app:not(.mode-piano):not(.piano-big) .panel { height: 162px; padding: 8px; gap: 8px; background: var(--paper); }
.app:not(.mode-piano):not(.piano-big) .panel > .section {
  background: #fff; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.app:not(.mode-piano):not(.piano-big) .sec-role { padding: 10px; }
.app:not(.mode-piano):not(.piano-big) .sec-piano .keyboard-scroll { border-radius: 0 0 13px 13px; }
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .app:not(.mode-piano):not(.piano-big) .panel { height: auto; padding: 6px; gap: 6px; }
  .app:not(.mode-piano):not(.piano-big) .panel > .section { border-radius: 12px; }
  .app:not(.mode-piano):not(.piano-big) .sec-role { padding: 6px; }
  .app:not(.mode-piano):not(.piano-big) .sec-role .segment { flex: 1; }
  .app:not(.mode-piano):not(.piano-big) .sec-role .seg-btn { flex: 1; justify-content: center; }
}
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .app:not(.mode-piano):not(.piano-big) .panel { height: 128px; padding: 6px; gap: 6px; }
  .app:not(.mode-piano):not(.piano-big) .sec-role { padding: 6px; }
}

/* «Розспівки», clearer: the exercise as a card, the sound in one block, the settings under plain names, two calm actions */
.ex-main { width: 320px; gap: 10px; }
.ex-top { align-items: center; padding: 4px 4px 0; }
.ex-top b { font-size: 16px; }
.ex-top span:not(:empty) { font-size: 11.5px; color: #50545b; background: var(--soft); border-radius: 999px; padding: 3px 9px; }
.ex-current { padding: 10px 12px 10px 10px; gap: 11px; }
.ex-ico { width: 38px; height: 38px; border-radius: 11px; background: #111; color: #fff; display: grid; place-items: center; flex: none; }
.ex-ico svg { width: 19px; height: 19px; }
.ex-change { display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ex-current:hover .ex-change { color: #111; }
.ex-deck { padding: 12px 12px 6px; }
.ex-transport { margin-bottom: 6px; }
.ex-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ex-field { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.ex-field + .ex-field { border-top: 1px solid var(--line); }
.ex-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ex-field select { font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; background: #fff; width: 100%; }
.ex-range { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #50545b; }
.ex-range select { flex: 1; min-width: 0; }
.ex-field .ex-seg { flex: none; }
.ex-seg button { padding: 6px 4px; font-size: 12.5px; }
.ex-folds { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ex-folds .ex-more { border: 0; border-radius: 0; padding: 0 12px; }
.ex-folds .ex-more + .ex-more { border-top: 1px solid var(--line); }
.ex-folds .ex-more[open] { background: #fafaf9; }
.ex-sum { display: flex; align-items: center; gap: 9px; }
.ex-sum svg { width: 17px; height: 17px; color: #50545b; }
.ex-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ex-actions .ex-rec { background: #fff; color: #d13438; box-shadow: inset 0 0 0 1.5px #f1b5b5; padding: 10px 8px; font-size: 13px; }
.ex-actions .ex-rec i { background: #e53935; }
.ex-actions .ex-rec:hover { background: #fdf0f0; }
.ex-actions .ex-rec.on { grid-column: 1 / -1; background: #e53935; color: #fff; box-shadow: 0 0 0 3px rgba(229, 57, 53, .2); }
.ex-actions .ex-rec.on i { background: #fff; }
.ex-actions .ex-export { padding: 10px 8px; }
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .ex-main { width: min(320px, calc(100vw - 32px)); }
}
/* every exercise in the list with its track icon, like the card above */
.ex-item { gap: 9px; padding: 6px 10px 6px 6px; }
.ex-li-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--soft); color: #111; display: grid; place-items: center; flex: none; }
.ex-li-ico svg { width: 14px; height: 14px; }
.ex-item.active .ex-li-ico { background: #fff; color: #111; }
/* «Своя вправа зі ступенів» now sits with the other actions: a row of its own above them, the same calm look */
.ex-actions .ex-add { grid-column: 1 / -1; margin: 0; padding: 10px 8px; background: #fff; color: #111; border: 1px solid var(--line); box-shadow: none; font-weight: 600; }
.ex-actions .ex-add:hover { background: var(--soft); }
/* «Розспівки» as a floating window: dragged by its title, ✕ closes it, the choices open beside it */
.ex-float .ex-top { justify-content: flex-start; gap: 8px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; padding: 2px 2px 0 4px; }
.ex-float.dragging, .ex-float.dragging .ex-top { cursor: grabbing; }
.ex-float.dragging { box-shadow: 0 22px 60px rgba(15, 20, 40, .28); }
.ex-x { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; flex: none; font-size: 13px; color: #6b7078; background: var(--soft); display: grid; place-items: center; }
.ex-x:hover { background: #e4e7ec; color: #111; }
.exr[data-side="list"] .ex-side[data-pane="list"], .exr[data-side="band"] .ex-side[data-pane="band"],
.exr[data-side="more"] .ex-side[data-pane="more"], .exr[data-side="mix"] .ex-side[data-pane="mix"],
.exr[data-side="custom"] .ex-side[data-pane="custom"], .exr[data-side="saved"] .ex-side[data-pane="saved"] { display: flex; animation: exSide .18s ease-out; }
.ex-side[data-pane="more"], .ex-side[data-pane="mix"] { width: 280px; gap: 4px; }
.ex-side-head { font-size: 13.5px; font-weight: 600; padding: 6px 4px 8px; }
.ex-side .ex-item { font: inherit; color: inherit; }
.ex-side .ex-item.active { color: #fff; }
.ex-field-flat { padding: 8px 6px; }
.exr[data-side="list"] #exPick .ex-chev, .exr[data-side="band"] #exBandPick .ex-chev,
.exr[data-side="more"] #exMorePick .ex-chev, .exr[data-side="mix"] #exMixPick .ex-chev { transform: rotate(180deg); }
.exr[data-side="band"] #exBandPick { border-color: #111; }
.exr[data-side="more"] #exMorePick, .exr[data-side="mix"] #exMixPick { background: var(--soft); }
.ex-select { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: inherit; font-size: 13.5px; text-align: left; border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px 6px 10px; background: #fff; color: var(--text); }
.ex-select:hover { border-color: #cfd2d8; }
.ex-fold { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font: inherit; font-size: 13px; font-weight: 600; text-align: left; color: var(--text); }
.ex-fold + .ex-fold { border-top: 1px solid var(--line); }
.ex-fold:hover { background: #fafaf9; }
.ex-chev { transition: transform .18s; }
/* «Своя вправа» beside the window */
.ex-side[data-pane="custom"] { width: 372px; }
.cd-side { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 2px; }
.cd-side .text-input { width: 100%; box-sizing: border-box; }
.cd-side .cd-grid { gap: 8px 10px; margin: 2px 0 6px; font-size: 13px; }
.cd-side .cd-select { min-width: 0; width: 100%; }
.cd-side .cd-actions { flex-wrap: nowrap; gap: 8px; align-items: center; margin-top: 2px; }
/* «Прослухати» beside the window: round, like ▶ of the exercises player; «Скасувати» and «Зберегти» on the same row */
.cd-side .cd-listen { width: 42px; height: 42px; padding: 0; border-radius: 50%; justify-content: center; flex: none; background: #111; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: transform .12s, background .12s; }
.cd-side .cd-listen:hover { background: #2e2e2e; transform: scale(1.04); }
.cd-side .cd-listen svg { width: 17px; height: 17px; }
.cd-side .cd-listen:not(.on) svg { margin-left: 2px; }
.cd-side .cd-listen span { display: none; }
.cd-side .cd-actions .btn:not(.cd-listen) { padding: 9px 14px; }
.exr[data-side="custom"] #exAdd { border-color: #111; background: var(--soft); }
/* the choices of a drop-down in «Своя вправа», as a column beside it */
.exr[data-pick]:not([data-pick=""]) .ex-pick-pane { display: flex; animation: exSide .18s ease-out; }
.ex-pick-pane { width: 230px; }
.ex-pick-pane .ex-list { max-height: calc(100vh - 110px); }
.ex-pick-pane .ex-item { padding: 8px 10px; }
.pk-group { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.pk-check { margin-left: auto; font-size: 13px; }
.cd-side select[hidden] { display: none !important; }
.cd-pick { min-width: 0; }
.cd-pick .pk-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-pick.open { border-color: #111; }
.cd-pick.open .ex-chev { transform: rotate(180deg); }
.cd-pick:disabled { opacity: .45; cursor: default; }
/* «Мої розспівки» and the three actions (Записати · У плеєр · Зберегти) */
.ex-side[data-pane="saved"] { width: 270px; }
.sv-item { padding-right: 6px; }
.sv-item .ex-hint { display: block; }
.sv-item.active .ex-hint, .sv-item:hover .ex-hint { color: var(--muted); }
.sv-del { opacity: .45; flex: none; }
.sv-item:hover .sv-del { opacity: .8; }
.exr[data-side="saved"] #exSavedPick { background: var(--soft); }
.exr[data-side="saved"] #exSavedPick .ex-chev { transform: rotate(180deg); }
.ex-actions:has(#exExport) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-actions .ex-export svg { width: 15px; height: 15px; }
.ex-actions #exToPlayer svg { width: 13px; height: 13px; }
.ex-actions .ex-rec, .ex-actions .ex-export { gap: 6px; white-space: nowrap; }
/* «?» beside a setting: its explanation on demand */
.snd-lbl { display: inline-flex; align-items: center; gap: 5px; }
.snd-q { width: 17px; height: 17px; border-radius: 50%; flex: none; font-size: 11px; font-weight: 700; line-height: 1; color: #6b7078; background: var(--soft); display: inline-grid; place-items: center; }
.snd-q:hover, .snd-q.on { background: #111; color: #fff; }
/* «Синхронність»: the slider across the card, «−» / «+» and «0» (syncAdjHtml in app.js) */
.sync-adj { padding: 8px 10px; }
.sync-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.sync-head .vol-val { width: auto; font-size: 13px; font-weight: 600; color: var(--text); }
.sync-ctl { display: flex; align-items: center; gap: 8px; }
.sync-track { position: relative; flex: 1; display: flex; }
.sync-track .range { flex: 1; width: 100%; }
.sync-mark { position: absolute; top: -3px; left: calc(7.5px + (100% - 15px) * var(--z)); width: 1.5px; height: 6px; margin-left: -.75px; background: #9aa0a8; border-radius: 1px; pointer-events: none; }
.sync-step { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--soft); font-size: 16px; font-weight: 600; line-height: 1; color: #111; }
.sync-step:hover:not(:disabled), .sync-zero:hover:not(:disabled) { background: #111; color: #fff; }
.sync-ends { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; font-size: 11px; color: var(--muted); }
.sync-zero { padding: 1px 9px; border-radius: 6px; background: var(--soft); font-size: 11px; font-weight: 600; color: #111; }
.sync-step:disabled, .sync-zero:disabled { opacity: .35; cursor: default; }
.mode-card {
  position: fixed; z-index: 101; width: 260px;
  background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15, 20, 40, .2); padding: 10px 12px 4px;
  animation: pop .12s ease-out;
}
.mode-card[hidden] { display: none; }
.mc-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.mc-row { padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; }
.mc-row b { display: block; font-weight: 600; color: #111; margin-bottom: 1px; }
.mc-row span { color: #4b4f56; }
/* «Надіслати учню інструкцію…»: a real button, black */
.snd-help-btn { display: block; width: calc(100% - 16px); margin: 6px 8px 6px; padding: 10px 12px; border-radius: 10px; background: #111; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: center; transition: background .14s; }
.snd-help-btn:hover:not(:disabled) { background: #2e2e2e; }
.snd-help-btn:disabled { opacity: .35; cursor: default; }
/* «Звук учня»: room for «Синхронність ?», the two sliders still one under the other; the three sound choices fit */
.snd-row.vol-row > span:first-child { width: 114px; }
.snd-seg { min-width: 0; }
.snd-seg button { padding-left: 7px; padding-right: 7px; font-size: 12px; white-space: nowrap; }
.snd-row:has(.snd-seg) { flex-wrap: wrap; row-gap: 6px; }
.snd-row:has(.snd-seg) > span:first-child { width: 100%; }
.snd-row .snd-seg { flex: 1 1 100%; margin: 0; }

/* «Екскурсія»: the chip in the top bar, the light on a part, the card beside it */
.tour-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 8px; background: #f1f0ec; border: 1px solid var(--hair); font-size: 12.5px; font-weight: 600; color: #111; }
.tour-btn:hover { background: #111; border-color: #111; color: #fff; }
.tour-btn svg { width: 15px; height: 15px; }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: #50545b; transition: background .14s, color .14s; }
.lang-btn[hidden] { display: none; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: #f1f0ec; color: #111; }
.lang-btn svg { width: 15px; height: 15px; }
.join-pending #roomLang { position: relative; z-index: 201; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.join-pending .popover.lang-pop { z-index: 202; }
.popover.lang-pop { min-width: 0; width: 164px; padding: 4px; font-size: 13px; }
.lang-pop .pop-title { font-size: 10.5px; padding: 6px 8px 3px; }
.lang-pop .pop-item { justify-content: space-between; padding: 7px 8px; color: #50545b; }
.lang-pop .pop-item.on { color: #111; font-weight: 600; }
.lp-code { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--muted); padding: 1px 5px; border-radius: 5px; }
.lang-pop .pop-item.on .lp-code { background: #111; color: #fff; }
@media (max-width: 700px) { .tour-btn span { display: none; } .tour-btn { padding: 0 7px; } }
.tour-layer { position: fixed; inset: 0; z-index: 500; }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 2px #fff, 0 0 0 9999px rgba(10, 12, 20, .58); transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease; pointer-events: none; }
.tour-card { position: fixed; width: min(320px, calc(100vw - 20px)); background: #fff; color: var(--text); border-radius: 16px; padding: 14px 16px 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); transition: left .28s ease, top .28s ease; }
.tour-top { display: flex; align-items: center; justify-content: space-between; }
.tour-count { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tour-x { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; color: #6b7078; background: var(--soft); display: grid; place-items: center; }
.tour-x:hover { background: #e4e7ec; color: #111; }
.tour-title { margin: 6px 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.1px; }
.tour-text { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #50545b; }
.tour-dots { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: #dcdcd8; }
.tour-dots i.on { background: #111; width: 16px; border-radius: 3px; }
.tour-actions { display: flex; justify-content: space-between; gap: 8px; }
.tour-actions .btn { padding: 9px 16px; border-radius: 10px; font-weight: 600; }
.tour-actions .btn.primary { background: #111; color: #fff; margin-left: auto; }
.tour-actions .btn.primary:hover { background: #2e2e2e; }
.tour-skip { background: transparent; color: var(--muted); padding-left: 4px !important; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } }

/* the site's live demo (demo.js): the top bar keeps only «Вокал / Фортепіано» — no «Екскурсія», timer or view menu */
.demo .topbar-right { visibility: hidden; }
/* …and the videos without «На весь екран» and the mirror */
.demo .tile-controls [data-fullscreen], .demo .tile-controls .tc-mirror { display: none; }
/* …and «Sound» and «Камера» without their menus (devices, headphones / speakers, synchrony, video quality) */
.demo .caret[data-devices="audioinput"], .demo .caret[data-devices="videoinput"] { display: none; }
/* …and no «Звук учня» (the student is make-believe) or «Reactions» — neither on the bar nor in «More» */
.demo #peerSoundBtn, .demo #reactionsBtn, .demo [data-tool="peerSoundBtn"], .demo [data-tool="reactionsBtn"] { display: none !important; }
/* …and what's locked in the demo (demo.js) looks it */
.demo #popover .more-tile, .demo #recordBtn, .demo #tunerBtn, .demo #metroBtn, .demo #shareBtn { opacity: .4; cursor: default; }
/* …and in «Фортепіано» no handle at the right edge — the side strip stays away (demo.js) */
.demo .bar-edge { display: none !important; }

/* ============ «Дошка»: the lesson board (board.js) — the stage's big panel, like the notes ============ */
.board { flex: 1; min-width: 0; display: flex; flex-direction: row; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.app.mode-piano.board-open .board { border-width: 0 1px 1px 0; border-radius: 0 0 14px 0; }
.board .board-bar { order: 2; }
.app .sheet-bar > .sheet-group:not(.tools) > #boardZoom {
  display: grid; place-items: center; min-width: 0; padding: 0; overflow: visible; white-space: nowrap;
  font-size: 10px; font-weight: 500; letter-spacing: -.2px; color: #2b2e33; font-variant-numeric: tabular-nums;
}
.board-close { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 7px; margin: 2px auto 4px; font-size: 12px;
  box-shadow: inset 0 0 0 1.5px #e5484d; color: #e5484d; transition: background .14s, color .14s; }
.board-close:hover { background: #e5484d; color: #fff; }
.board-list-btn { width: 36px; height: 32px; display: grid; place-items: center; flex: none; color: #8b9098; border-radius: 8px; }
.board-list-btn svg { width: 17px; height: 17px; }
.board-list-btn:hover { background: var(--soft); color: #111; }
.board.view-only .board-bar .sheet-group.tools { display: none; }

/* the canvas: a dotted sheet that moves and zooms */
.board-canvas {
  position: relative; flex: 1; min-width: 0; overflow: hidden; touch-action: none; cursor: default;
  background-color: #fafafa;
  background-image: radial-gradient(circle, #d9dce2 1px, transparent 1.2px);
  background-size: calc(24px * var(--z, 1)) calc(24px * var(--z, 1));
}
.board-canvas.panning { cursor: grabbing; }
.board-canvas[data-tool="pen"], .board-canvas[data-tool="eraser"] { cursor: crosshair; }
.board-canvas[data-tool="sticky"], .board-canvas[data-tool="staff"] { cursor: copy; }
.board-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.board-ink { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 5; }
.board-ink path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.board-status { position: absolute; left: 12px; bottom: 8px; font-size: 11.5px; color: var(--muted); pointer-events: none; }

.b-item { position: absolute; }
.b-item.selected { outline: 2px solid var(--blue); outline-offset: 2px; }
.b-h { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 4px; background: #fff; border: 1.5px solid var(--blue); display: none; z-index: 2; touch-action: none; }
.b-item.selected .b-h { display: block; }
.board.view-only .b-h { display: none !important; }
.b-h[data-h="n"] { left: 50%; top: 0; cursor: ns-resize; }
.b-h[data-h="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.b-h[data-h="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.b-h[data-h="w"] { left: 0; top: 50%; cursor: ew-resize; }
.b-h[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.b-h[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.b-h[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.b-h[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.b-staff .b-h { height: 26px; margin-top: -13px; width: 10px; margin-left: -5px; }

/* stickers */
.b-sticky { border-radius: 4px; box-shadow: 0 2px 8px rgba(20, 24, 40, .12), 0 1px 2px rgba(20, 24, 40, .08); cursor: grab; }
.b-sticky .b-text { width: 100%; height: 100%; padding: 12px 14px; overflow: hidden; font-size: 17px; line-height: 1.3; color: #1d1f23; white-space: pre-wrap; word-break: break-word; outline: none; }
.b-sticky .b-text:empty::before { content: 'Двічі клацніть, щоб писати'; color: rgba(0, 0, 0, .35); font-size: 14px; }
.board.view-only .b-sticky .b-text:empty::before { content: ''; }
.b-sticky .b-text[contenteditable="true"] { cursor: text; }

/* staves */
.b-staff { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 10px rgba(20, 24, 40, .08); padding: 0 8px 10px; }
.bs-head { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 2px; cursor: grab; user-select: none; }
.bs-title { font-weight: 600; font-size: 14px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 4px; }
.bs-head .bs-info { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; background: none; padding: 0 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.bs-head .bs-info:hover { background: var(--soft); color: #2b2e33; }
.bs-head .bs-more { margin-left: auto; }
.bs-head > button:not(.bs-info) { flex: none; white-space: nowrap; } /* (the key · meter · tempo line gives way first) */
.bs-head .bs-title { min-width: 48px; }
.bs-head button { height: 28px; border-radius: 8px; padding: 0 9px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; background: var(--soft); color: #2b2e33; }
.bs-head button:hover { background: #e4e7ec; }
.bs-rec i { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; }
.bs-rec.on { background: #e5484d; color: #fff; }
.bs-rec.on:hover { background: #d13c41; }
.bs-rec.on i { background: #fff; border-radius: 2px; animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: .3; } }
.bs-play svg { width: 13px; height: 13px; }
.bs-play.on { background: #111; color: #fff; }
.board.view-only .bs-rec, .board.view-only .bs-more { display: none; }
.bs-edit { display: flex; align-items: center; gap: 6px; padding: 4px 6px; margin: 0 0 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 8px rgba(20, 24, 40, .06); width: max-content; max-width: 100%; flex-wrap: wrap; }
.bs-edit[hidden] { display: none; }
.bs-edit button { min-width: 30px; height: 28px; border-radius: 7px; padding: 0 5px; display: inline-grid; place-items: center; color: #2b2e33; font-size: 12.5px; }
.bs-edit button:hover { background: var(--soft); }
.bs-edit button.active { background: #111; color: #fff; }
.bs-edit button[hidden], .bs-edit [data-sel-only][hidden] { display: none; }
/* groups of buttons: one rounded tray each */
.bs-edit .bs-seg { display: inline-flex; gap: 1px; padding: 2px; background: var(--soft); border-radius: 9px; }
.bs-edit .bs-seg button:hover { background: #e4e7ec; }
.bs-edit .bs-seg button.active { background: #111; }
.bs-edit .bs-txt { display: inline-flex; gap: 4px; padding: 0 8px 0 5px; background: var(--soft); }
.bs-edit .bs-txt b { font-weight: 600; font-size: 12px; }
.bs-edit .bs-hint { flex-basis: 100%; font-size: 11px; color: var(--muted); padding: 0 4px 2px; }
.bs-edit .bs-hint:empty { display: none; }
/* an empty staff says how to fill it */
.bs-empty { margin: 2px 2px 8px; padding: 10px 12px; border-radius: 10px; background: #f7f7f5; border: 1px dashed #dcdbd6; font-size: 12.5px; line-height: 1.5; color: #50545b; }
.bs-empty[hidden] { display: none; }
.bs-empty b { color: #1d1f23; font-weight: 600; }
.bs-empty i.r { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; margin-right: 4px; }
.board.view-only .bs-empty { display: none; }
/* «На весь екран»: one staff over the whole board, fixed (board.js, setStaffFocus) */
.bs-head .bs-full { padding: 0 7px; }
.bs-head .bs-full svg { width: 15px; height: 15px; }
.bs-head .bs-full.on { background: #111; color: #fff; }
#boardView.staff-focus .b-item:not(.b-focus), #boardView.staff-focus #boardInk { visibility: hidden; }
#boardView.staff-focus .board-zoom, #boardView.staff-focus .sheet-group.tools { display: none; }
.b-staff.b-focus { overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; padding: 0 20px 24px; }
.b-staff.b-focus .b-h { display: none; }
.b-staff.b-focus .bs-head { position: sticky; top: 0; z-index: 2; background: #fff; cursor: default; height: 48px; }
.b-staff.b-focus .bs-edit { position: sticky; top: 48px; z-index: 2; }
.bs-edit .sep { width: 1px; height: 18px; background: #d6d9de; margin: 0 3px; }
.bs-svg { display: block; width: 100%; overflow: visible; }
.bs-svg .bl { stroke: #1d1f23; stroke-width: 1; }
.bs-svg .bb { stroke: #1d1f23; stroke-width: 1.2; }
.bs-svg .bb.end { stroke-width: 3; }
.bs-svg .b-clef { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Music", serif; fill: #1d1f23; }
.bs-svg .b-time { font: 700 17px/1 "New York", ui-serif, Georgia, serif; fill: #1d1f23; text-anchor: middle; }
.bs-svg .b-barno { font-size: 9px; fill: var(--muted); }
.bs-svg .b-acc { font-family: "Apple Symbols", "Segoe UI Symbol", serif; font-size: 26px; }
.bs-svg .b-ly { font-size: 12px; fill: #2b2e33; text-anchor: middle; }
.bs-svg .b-rest, .bs-svg .b-rest-q, .bs-svg .b-rest-e circle { fill: #1d1f23; }
.bs-svg .b-rest-s { fill: none; stroke: #1d1f23; stroke-width: 1.4; stroke-linecap: round; }
.bs-svg .b-tie { fill: none; stroke: #1d1f23; stroke-width: 1.2; }
.bs-svg .b-ev { color: #1d1f23; }
.bs-svg .b-ev.sel { color: var(--blue); }
.bs-svg .b-ev.playing { color: #e8a400; }
.bs-svg .ev-hit { fill: transparent; cursor: pointer; }
.bs-svg .ev-hit:hover { fill: rgba(52, 80, 236, .06); }
.b-staff.selected { outline-offset: 3px; }

/* picking a board */
.board-pick-note { color: var(--muted); font-size: 13px; margin-top: -4px; }
.board-pick-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 14px; }
.board-pick-row .text-input { flex: 1; }
.board-pick-list { max-height: 280px; }
.bs-bpm { width: 64px; padding: 4px 8px; margin: 0 4px; }
.bs-clefs button { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Music", serif; font-size: 16px; }
.bs-svg .b-beam { fill: #1d1f23; }
.bs-svg .b-tri { font: italic 600 11px Georgia, serif; fill: #1d1f23; text-anchor: middle; }
.bs-svg .b-key { font-size: 13px; }
.bs-svg .b-cursor { fill: var(--blue); opacity: .85; animation: rec-blink 1.1s infinite; }
.bs-input.on { background: #111; color: #fff; }
.bs-input.on:hover { background: #2e2e2e; }
.bs-input svg { width: 13px; height: 13px; }
.board.view-only .bs-input { display: none; }
.bs-edit.input { border-color: #111; }
.bs-edit-cap { font-size: 12px; color: #1d1f23; font-weight: 600; padding: 0 2px 0 4px; }
.bs-edit-cap:empty { display: none; }

.bs-key { width: auto; padding: 4px 6px; margin-left: 6px; max-width: 190px; }

/* «Дошка»: the colour — one button, the choice beside it */
.popover.color-pop { min-width: 0; padding: 5px; }
.popover.color-pop .pop-title { display: none; }
.board-colors { display: grid; grid-template-columns: repeat(7, 26px); gap: 3px; }
.board-colors button { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--n); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.board-colors button i { width: 13px; height: 13px; border-radius: 50%; background: var(--c); }
.board-colors button:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 0 0 2px #d9dce1; }
.board-colors button.active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 0 0 1.5px #111; }

/* figures: a shape stretched to the item, a word in the middle */
.b-sticky .b-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.b-sticky .b-shape path { stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.b-sticky[data-shape="note"] .b-shape { display: none; }
.b-figure { box-shadow: none; border-radius: 0; }
.b-figure .b-text { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14% 16%; }
.b-figure[data-shape="triangle"] .b-text { padding: 40% 22% 8%; }
.b-figure[data-shape="bubble"] .b-text { padding: 6% 10% 30%; }
.b-figure[data-shape="arrow"] .b-text { padding: 12% 30% 12% 8%; }
.b-figure[data-shape="star"] .b-text { padding: 30% 26%; font-size: 14px; }
.b-figure.selected { outline: 1.5px dashed var(--blue); }
.b-figure .b-text:empty::before { content: ''; }
/* choosing a shape */
.popover.board-pop { max-width: none; }
.board-shapes { display: grid; grid-template-columns: repeat(5, 72px); gap: 4px; padding: 2px; }
.board-shapes button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px 6px; border-radius: 10px; font-size: 10px; line-height: 1.15; color: #50545b; min-width: 0; }
.board-shapes button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-shapes button:hover { background: var(--soft); }
.board-shapes button.active { background: var(--soft); box-shadow: inset 0 0 0 1.5px #111; color: #111; }
.board-shapes svg { width: 30px; height: 30px; overflow: visible; }
.board-shapes svg path { fill: var(--n); stroke: var(--c); stroke-width: 5; stroke-linejoin: round; }
.board-shapes svg .sw-note { fill: var(--n); stroke: none; }
.board-shapes svg .sw-fold { fill: none; stroke: rgba(0,0,0,.25); }

/* one pen button → which pen, beside it (notes and «Дошка») */
.pen-types { display: grid; grid-template-columns: repeat(5, 28px); gap: 3px; }
.pen-types button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: #50545b; }
.pen-types button svg { width: 16px; height: 16px; }
.pen-types button:hover { background: var(--soft); color: #111; }
.pen-types button.active { background: #111; color: #fff; }
/* «Очистити» under «Учням» in the notes' column */
.app .sheet-bar > #sheetClear { width: 36px; height: 30px; flex: none; display: grid; place-items: center; margin: 4px auto 0; border-radius: 8px; color: #5b6068; background: none; transition: background .12s, color .12s; }
.app .sheet-bar > #sheetClear:hover { background: var(--soft); color: #111; }
.sheet.view-only #sheetClear { display: none !important; }

/* «Запис»: what goes into the video */
.popover.rec-mode-pop { max-width: 300px; }
.rec-mode-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; }
.rec-mode-item.on { background: var(--soft); }
.rec-mode-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: #f1f2f4; color: #2b2e33; }
.rec-mode-item.on .rec-mode-ico { background: #111; color: #fff; }
.rec-mode-ico svg { width: 20px; height: 20px; }
.rec-mode-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.rec-mode-text b { font-weight: 600; font-size: 14px; }
.rec-mode-text span { font-size: 12px; color: var(--muted); }

/* stickers and figures on the notes page */
.sheet-shapes { position: absolute; inset: 0; pointer-events: none; font-size: var(--fs, 16px); z-index: 2; }
.sheet-shapes .b-item { pointer-events: none; }
.sheet-shapes.active .b-item { pointer-events: auto; cursor: grab; }
.sheet-shapes .b-sticky .b-text { font-size: var(--fs, 16px); }
.sheet-shapes .b-sticky[data-shape="note"] .b-text { padding: .6em .75em; }
.sheet.view-only .sheet-shapes .b-h { display: none !important; }
#inkCanvas[data-tool="shape"] { cursor: copy; }
.board-shapes.mini { grid-template-columns: repeat(5, 30px); gap: 3px; padding: 0; }
.board-shapes.mini button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
.board-shapes.mini svg { width: 18px; height: 18px; }

/* words alone («Т»): no paper, no frame; only the width is stretched */
.b-textbox { box-shadow: none !important; background: none !important; min-height: 1.3em; cursor: grab; }
.b-textbox .b-shape { display: none; }
.b-textbox .b-text { padding: 2px 4px !important; font: inherit !important; color: inherit; line-height: 1.25; height: auto !important; overflow: visible; }
.b-textbox .b-text:empty::before { content: 'Текст'; color: currentColor; opacity: .35; }
.board.view-only .b-textbox .b-text:empty::before { content: ''; }
.b-textbox .b-h:not([data-h="e"]):not([data-h="w"]) { display: none !important; }
.b-textbox.selected { outline: 1.5px dashed var(--blue); outline-offset: 2px; }
#inkCanvas[data-tool="text"], .board-canvas[data-tool="text"] { cursor: text; }
/* the text tool's menu: sizes, then faces */
.text-menu { display: flex; flex-direction: column; gap: 4px; }
.text-sizes, .text-fonts { display: flex; gap: 3px; }
.text-sizes button, .text-fonts button { min-width: 30px; height: 30px; padding: 0 5px; border-radius: 7px; display: grid; place-items: center; color: #2b2e33; line-height: 1; }
.text-fonts button { font-size: 14px; min-width: 34px; }
.text-sizes button:hover, .text-fonts button:hover { background: var(--soft); }
.text-sizes button.active, .text-fonts button.active { background: #111; color: #fff; }

/* sheets of paper on «Дошка» */
.b-paper { background: #fff; border: 1px solid #e3e6eb; border-radius: 4px; box-shadow: 0 3px 14px rgba(20, 24, 40, .1); z-index: 0; }
.b-sticky, .b-staff { z-index: 1; }
.b-paper .p-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p-svg .bl { stroke: #1d1f23; stroke-width: 1; }
.p-svg .p-rule { stroke: #c9d6ea; stroke-width: 1; }
.p-svg .p-grid { stroke: #e2e8f1; stroke-width: 1; }
.p-svg .p-margin { stroke: #f2b8b8; stroke-width: 1; }
.p-svg .b-clef, .p-svg .b-acc { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Music", serif; }
.p-svg .b-acc { font-size: 26px; } /* (as tall as engraved ones — about three spaces of the staff) */
.p-svg .b-rest, .p-svg .b-rest-q, .p-svg .b-rest-e circle { fill: currentColor; }
.p-svg .b-rest-s { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.p-glyph { color: #1d1f23; cursor: grab; }
.p-glyph.sel { color: var(--blue); }
.p-hit { fill: transparent; }
.board-canvas.glyph-mode .b-paper[data-kind="staff"] { cursor: copy; }
.p-bar { position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 2px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(20, 24, 40, .12); white-space: nowrap; }
.p-bar[hidden] { display: none; }
.p-bar button { min-width: 30px; height: 30px; border-radius: 7px; font: 18px/1 "Apple Symbols", "Segoe UI Symbol", "Noto Music", serif; color: #2b2e33; display: grid; place-items: center; }
.p-bar button:hover { background: var(--soft); }
.p-bar button.active { background: #111; color: #fff; }
.p-bar .sep { width: 1px; height: 18px; background: #d6d9de; margin: 0 3px; }
.board.view-only .p-bar { display: none; }
/* «Позначки» on the manuscript's bar, and its menu */
.p-bar button.p-marks { display: flex; align-items: center; gap: 4px; padding: 0 8px; font: 500 12.5px/1 -apple-system, "Segoe UI", Roboto, sans-serif; }
.p-bar button.p-marks i { font-style: normal; font-size: 9px; opacity: .6; }
.p-bar button.p-marks .p-marks-ico:empty { display: none; }
.p-bar button.p-marks.active .p-marks-lbl { display: none; }
.popover.marks-popover { width: 306px; padding: 10px 10px 8px; } /* (the 8 dynamics in one row) */
.marks-pop .mk-title { font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #9a9994; margin: 6px 2px 4px; }
.marks-pop .mk-title:first-child { margin-top: 0; }
.marks-pop .mk-row { display: flex; flex-wrap: wrap; gap: 3px; }
.marks-pop .mk-row button { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #2b2e33; background: #f7f7f5; border: 1px solid #efeeea; }
.marks-pop .mk-row button:hover { background: #fff; border-color: #dcdbd6; }
.marks-pop .mk-row button.active { background: #111; border-color: #111; color: #fff; }
.marks-pop .mk-hint { font-size: 11px; line-height: 1.35; color: var(--muted); margin: 8px 2px 0; }
/* the marks on the sheet */
.p-svg .p-dyn { font: italic 700 17px "New York", ui-serif, Georgia, serif; }
.p-svg .p-finger { font: 700 12px -apple-system, "Segoe UI", sans-serif; }
.p-svg .p-volta { font: 600 11px -apple-system, "Segoe UI", sans-serif; }
.p-svg .p-word { font: italic 600 13px "New York", ui-serif, Georgia, serif; }
.p-svg .p-chord { font: 700 13px -apple-system, "Segoe UI", sans-serif; }
.p-svg .p-lyric { font: 12px -apple-system, "Segoe UI", sans-serif; }
.p-svg .b-time { font: 700 17px/1 "New York", ui-serif, Georgia, serif; text-anchor: middle; }

/* the colour row inside the shapes' menu */
.board-colors.shape-colors { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.board-pop .board-colors.shape-colors { grid-template-columns: repeat(7, 30px); gap: 4px; padding: 4px 2px 8px; }
.board-pop .board-colors.shape-colors button { width: 30px; height: 30px; }

/* «Клавіші» on «Дошка»: the panel below hidden, the board down to the bottom */
.app.keys-hidden #panel, .app.keys-hidden #panelToggle { display: none !important; }
.board-keys { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 36px; flex: none; margin: 4px auto 0; padding: 4px 0 3px; border-radius: 8px; color: #5b6068; transition: background .12s, color .12s; }
.board-keys svg { width: 18px; height: 18px; }
.board-keys span { font-size: 9px; line-height: 1.1; }
.board-keys:hover { background: var(--soft); color: #111; }
.board-keys.on { background: #111; color: #fff; }

.p-svg .p-help { stroke: #e3e9f3; stroke-width: 1; }
.p-svg .p-slant { stroke: #dde5f0; stroke-width: 1; }
.p-svg .p-dot { fill: #b9c3d3; }
.p-svg .p-fine { fill: none; stroke: #e7ecf3; stroke-width: .7; }
.p-svg .p-fine-b { fill: none; stroke: #cdd7e4; stroke-width: 1; }
/* the sheet menu: the main three, and «Чистий аркуш»'s kinds at the side */
.popover.paper-pop { max-width: none; }
.paper-menu { display: flex; flex-direction: row-reverse; gap: 6px; } /* the kinds open to the left, the main list stays by the button */
.paper-main { width: 262px; }
.paper-side { border-right: 1px solid var(--line); padding-right: 6px; }
.paper-side[hidden] { display: none; }
.paper-tiles { display: grid; grid-template-columns: repeat(3, 84px); gap: 4px; }
.paper-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 10px; font-size: 11.5px; color: #2b2e33; text-align: center; line-height: 1.2; }
.paper-tile:hover { background: var(--soft); }
.paper-tile.on { background: var(--soft); box-shadow: inset 0 0 0 1.5px #111; }
.paper-tile .rec-mode-ico { width: 40px; height: 40px; }
.paper-tile .rec-mode-ico svg { width: 24px; height: 24px; }
.paper-more { order: -1; font-size: 20px; color: var(--muted); padding-right: 2px; margin-left: -4px; }

/* words on a sheet */
.p-doc { position: absolute; inset: 0; padding: 34px 40px; overflow: hidden; pointer-events: none; outline: none; color: #1d1f23; font-size: 16px; line-height: 1.5; word-break: break-word; }
.p-doc[contenteditable="true"] { pointer-events: auto; cursor: text; }
.p-doc[data-kind="lined"] { padding: 47px 28px 20px 66px; line-height: 28px; }
.p-doc[data-kind="lined"] h1, .p-doc[data-kind="lined"] h2, .p-doc[data-kind="lined"] h3 { line-height: 28px; }
.p-doc[data-kind="grid"], .p-doc[data-kind="dots"] { padding: 22px 24px; line-height: 20px; }
.p-doc p { margin: 0; min-height: 1em; }
.p-doc h1 { font-size: 30px; font-weight: 700; margin: 6px 0 6px; line-height: 1.25; }
.p-doc h2 { font-size: 23px; font-weight: 700; margin: 6px 0 4px; line-height: 1.3; }
.p-doc h3 { font-size: 19px; font-weight: 600; margin: 4px 0 2px; line-height: 1.35; }
.p-doc ul, .p-doc ol { margin: 0; padding-left: 26px; }
.p-doc blockquote { margin: 6px 0; padding: 2px 0 2px 14px; border-left: 3px solid #cfd4dc; color: #50545b; font-style: italic; }
.p-doc ul.p-check { list-style: none; padding-left: 4px; }
.p-doc ul.p-check > li { position: relative; padding-left: 28px; pointer-events: auto; }
.p-doc ul.p-check > li::before { content: ''; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border: 1.6px solid #8b9098; border-radius: 4px; background: #fff; cursor: pointer; }
.p-doc ul.p-check > li[data-checked="1"]::before { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--blue); }
.p-doc ul.p-check > li[data-checked="1"] { color: #8b9098; text-decoration: line-through; }
.board.view-only .p-doc ul.p-check > li { pointer-events: none; }
.p-plus { position: absolute; left: 8px; top: 8px; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 19px; line-height: 1; color: #6b7078; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.08); z-index: 3; }
.p-plus:hover { background: #111; color: #fff; border-color: #111; }
.p-plus[hidden] { display: none; }
/* the kinds of block */
.popover.doc-pop { min-width: 250px; padding: 5px; }
.doc-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.doc-item.hot { background: var(--soft); }
.doc-ico { width: 24px; font-weight: 700; font-size: 13px; color: #2b2e33; text-align: center; }
.doc-name { flex: 1; }
.doc-cur { color: var(--blue); }
.doc-key { font-size: 11px; color: #a3a8b0; white-space: nowrap; }

/* «Написати нам» (More): what it is about, then the text */
.sup-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
h2 + .sup-kinds { margin-top: 16px; }
.sup-kind { padding: 8px 13px; border-radius: 10px; border: 1px solid #d9dce1; background: #fff; font: inherit; font-size: 14px; color: #50545b; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.sup-kind:hover { border-color: #b9bdc5; color: #1d1f23; }
.sup-kind.on { background: #1d1f23; border-color: #1d1f23; color: #fff; }
.text-input.sup-text { display: block; min-height: 120px; line-height: 1.5; resize: vertical; box-sizing: border-box; }

/* The second camera: a small picture in the tile's corner (the name tag is top-left, the controls bottom-left),
   or floating anywhere on the stage (dragged there); a double click makes it the big picture (only on this screen) */
.cam2 {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  width: max(28%, 150px); aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background: #111;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35), 0 0 0 1.5px rgba(255, 255, 255, .85);
  transition: box-shadow .15s;
}
.cam2:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, .4), 0 0 0 2px #fff; }
.cam2.floating { right: auto; bottom: auto; z-index: 30; }
.cam2.dragging { cursor: grabbing; box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 2px #fff; }
.cam2-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; pointer-events: none; }
.cam2-video.portrait { object-fit: contain; }
.cam2-label {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 7px; border-radius: 6px; max-width: calc(100% - 34px);
  background: rgba(20, 21, 25, .6); color: #fff; font-size: 11px; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cam2-tools { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.cam2:hover .cam2-tools, .cam2:focus-within .cam2-tools, .cam2.dragging .cam2-tools { opacity: 1; }
@media (hover: none) { .cam2-tools { opacity: .9; } }
.cam2-btn {
  width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(20, 21, 25, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .15s;
}
.cam2-btn svg { width: 14px; height: 14px; }
.cam2-btn:hover { background: rgba(20, 21, 25, .88); }
.cam2-dock { display: none; }
.cam2.floating .cam2-dock { display: grid; }
/* the corner to pull for the size */
.cam2-resize { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; }
.cam2-resize::after {
  content: ""; position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px;
  border-right: 2px solid rgba(255, 255, 255, .9); border-bottom: 2px solid rgba(255, 255, 255, .9); border-bottom-right-radius: 3px;
  opacity: 0; transition: opacity .15s;
}
.cam2:hover .cam2-resize::after, .cam2.dragging .cam2-resize::after { opacity: 1; }
.tile.cam2-main .cam2-resize { display: none; }

/* swapped: the second camera fills the tile, the main one is the small corner picture */
.tile.cam2-main .cam2 { inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; z-index: 1; cursor: default; }
.tile.cam2-main > .tile-video { cursor: pointer; }
.tile.cam2-main .cam2-label { display: none; }
.tile.cam2-main .cam2-tools { top: auto; bottom: calc(10px + max(28%, 150px) * 9 / 16 + 6px); right: 10px; opacity: .9; }
.tile.cam2-main > .tile-video {
  inset: auto 10px 10px auto; width: max(28%, 150px); height: auto; aspect-ratio: 16 / 9; z-index: 4;
  border-radius: 10px; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35), 0 0 0 1.5px rgba(255, 255, 255, .85);
}
/* the main camera is off: no black box in the corner (its placeholder stays under the big picture) */
.tile.cam2-main:has(> .placeholder:not([hidden])) > .tile-video { display: none; }
/* a small speaker-view tile: the second picture stays readable */
.tiles.speaker #localTile:not(.cam2-main) .cam2, .tiles.speaker.swapped #remoteTile:not(.cam2-main) .cam2 { width: 36%; min-width: 0; }

/* «Телефон як камера» (phonecam.js): the menu item and the dialog with the QR code */
.pop-item.cam2-phone { align-items: flex-start; }
.pop-item.cam2-phone .check { display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.cam2-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.modal:has(.pcam-qr) { width: min(360px, calc(100vw - 32px)); }
.pcam-title { display: flex; align-items: center; gap: 8px; }
.pcam-title svg { width: 20px; height: 20px; }
.modal p.pcam-sub { margin-bottom: 14px; }
.pcam-qr { width: 200px; height: 200px; margin: 0 auto 10px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.pcam-qr svg { display: block; width: 100%; height: 100%; }
.pcam-steps { margin: 0 0 6px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: #3b3f45; }
.pcam-status { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto 14px; padding: 5px 12px; border-radius: 99px; background: var(--soft); font-size: 12.5px; color: #3b3f45; }
.pcam-status::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f5a623; }
.pcam-status.wait::before { animation: pcam-blink 1.2s ease-in-out infinite; }
.pcam-status.ok { background: #e8f8ec; color: #1d6b32; }
.pcam-status.ok::before { background: var(--green); }
@keyframes pcam-blink { 50% { opacity: .25; } }
.pcam-warn { padding: 8px 12px; border-radius: 10px; background: #fff4e0; color: #7a4b00; font-size: 12.5px; line-height: 1.45; margin-top: 8px; }

/* A chat message while the chat is closed (app.js, chatNotice): a card above the toolbar, on the right */
.chat-notes { position: fixed; right: 16px; bottom: 84px; z-index: 410; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.chat-note {
  pointer-events: auto; position: relative; display: flex; gap: 11px; align-items: flex-start;
  width: min(320px, calc(100vw - 32px)); padding: 12px 34px 12px 12px;
  background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22); cursor: pointer;
  animation: chatNoteIn .22s ease-out;
}
.chat-note:hover { border-color: #cfd2d8; }
.chat-note.out { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
@keyframes chatNoteIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.cn-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #111; color: #fff; display: grid; place-items: center; }
.cn-icon svg { width: 18px; height: 18px; }
.cn-body { min-width: 0; flex: 1; }
.cn-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 5px; }
.cn-head b { font-size: 13.5px; font-weight: 650; }
.cn-head span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-text { font-size: 14px; line-height: 1.4; color: #2a2d33; background: var(--soft); border-radius: 4px 12px 12px 12px; padding: 7px 10px; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cn-img { display: block; max-width: 100%; max-height: 120px; border-radius: 10px; object-fit: cover; }
.cn-open { margin-top: 7px; font-size: 12px; font-weight: 600; color: #111; }
.cn-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 7px; font-size: 11px; color: #8b9098; background: transparent; }
.cn-x:hover { background: var(--soft); color: #111; }
/* the big piano fills the bottom: the card goes up, over the videos */
body:has(#app.mode-piano, #app.piano-big) .chat-notes { top: 56px; bottom: auto; }
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .chat-notes { top: calc(52px + env(safe-area-inset-top)); bottom: auto; right: 50%; transform: translateX(50%); align-items: center; }
}
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .chat-notes { top: 44px; bottom: auto; }
}

/* «Фортепіано»: the instruments' sound by «MIDI» (rtc.js, pianoSoundBtn) — only in piano mode */
.psound-btn { gap: 5px; font-size: 12.5px; white-space: nowrap; }
.app:not(.mode-piano) .psound-btn { display: none; }
.psound-btn .ps-warn { color: #e5484d; font-weight: 700; }
.psound-btn:hover .ps-warn { color: #ffb4ae; }
.snd-warn { font-size: 12px; color: #b4231f; background: #fff1f0; border-radius: 8px; padding: 7px 9px; margin: 2px 6px 4px; max-width: 320px; }
.ps-title { display: flex; align-items: center; gap: 6px; }
.ps-help { font-size: 12px; line-height: 1.5; color: #3b3f45; background: var(--soft); border-radius: 10px; padding: 8px 10px; margin: 2px 6px 6px; max-width: 320px; }
.ps-help b { font-weight: 600; color: #111; }
.ps-help .ps-note { color: var(--muted); }

/* «Фортепіано» with a second camera: 2×2 — each one's column, the face above, the hands below; the sizes and places
   are set by app.js (layoutQuad): the lines between the pictures move, a picture dragged onto another swaps with it */
.app.mode-piano .tiles.quad { display: block; padding: 0; }
.app.mode-piano .tiles.quad #remoteTile, .app.mode-piano .tiles.quad #localTile, .app.mode-piano .tiles.quad > .cam2 {
  position: absolute; z-index: 1; box-shadow: none; aspect-ratio: auto; border-radius: 14px; cursor: grab;
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease, box-shadow .15s;
}
.app.mode-piano .tiles.quad.quad-resizing #remoteTile, .app.mode-piano .tiles.quad.quad-resizing #localTile, .app.mode-piano .tiles.quad.quad-resizing > .cam2 { transition: none; }
.tiles.quad > .cam2:hover { box-shadow: none; }
.tiles.quad > .cam2 .cam2-video { object-fit: contain; } /* (the hands and the keys whole, whatever the size) */
.tiles.quad > .cam2 :is(.cam2-swap, .cam2-dock, .cam2-resize) { display: none; }
.tiles.quad > .cam2 .cam2-label { left: 10px; bottom: 10px; font-size: 12px; }
.tiles.quad .swap-btn { display: none; }
.app.mode-piano .tiles.quad .quad-drag { z-index: 5; transition: none; opacity: .85; cursor: grabbing; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.tiles.quad-dragging .quad-drag { pointer-events: none; }
.app.mode-piano .tiles.quad .quad-target { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #111; }
.quad-split { position: absolute; z-index: 3; touch-action: none; }
.quad-split[hidden] { display: none; }
.quad-split.v { width: 10px; cursor: col-resize; }
.quad-split.h { height: 10px; cursor: row-resize; }
.quad-split::after { content: ''; position: absolute; border-radius: 3px; background: rgba(0, 0, 0, .28); opacity: 0; transition: opacity .15s; }
.quad-split.v::after { left: 3px; top: 50%; width: 4px; height: 44px; transform: translateY(-50%); }
.quad-split.h::after { top: 3px; left: 50%; height: 4px; width: 44px; transform: translateX(-50%); }
.quad-split:hover::after, .tiles.quad-resizing .quad-split::after { opacity: 1; }

/* «Вокал», the notes open and the panel tucked away: the player alone at the bottom of the side column (app.js, placePlayer);
   a narrow column — the name on the first line beside ▶, the tools on the second, to the right */
.player-dock { flex: none; width: 100%; margin-top: auto; border: 1px solid var(--hair); border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .06); overflow: hidden; }
.player-dock .sec-player { min-width: 0; border-right: 0; padding-bottom: 6px; }
.player-dock .player-row { flex-wrap: wrap; height: auto; gap: 4px 6px; }
.player-dock .track-name { font-size: 14px; flex: 1 1 calc(100% - 60px); }
.player-dock .spacer { display: none; }
.player-dock #loopBtn { margin-left: auto; }
.player-dock :is(.yt-btn .lbl-long, #chooseFileBtn .lbl-long, .ps-mm) { display: none; }
.player-dock #chooseFileBtn .lbl-short { display: inline; }
.player-dock .pill-btn { padding: 7px 10px; }
.player-dock .player-sliders { gap: 8px; }

/* a narrow side panel: the graph gets the room */
.vl-side { gap: 6px; }
.vl-side .vl-card { padding: 9px 10px; border-radius: 12px; }
.vl-side .vl-card h4 { font-size: 10px; margin-bottom: 4px; }
.vl-side .vl-seg { align-self: stretch; }
.vl-side .vl-seg button { flex: 1; padding: 0 4px; }
.vl-side .vl-stats { gap: 6px; }
.vl-side .vl-stat { padding: 7px 8px; border-radius: 10px; }
.vl-side .vl-stat small { font-size: 9.5px; letter-spacing: .3px; }
.vl-side .vl-stat b { font-size: 15px; }
.vl-side .vl-big b { font-size: 22px; }
.vl-side .vl-now-row b { font-size: 17px; }
.vl-side .vl-now-row .n { font-size: 12px; }
.vl-side .vl-legend { font-size: 11.5px; gap: 5px; }
.vl-side .vl-pick b { font-size: 22px; }
.vl-side .vl-step { width: 30px; height: 30px; }
.vl-side .vl-mini button { width: 22px; }
.vl-side .vl-mini span { padding: 0 2px; min-width: 26px; }
.vl-side .vl-big { flex-wrap: wrap; gap: 2px 6px; }
.vl-side .vl-big span { white-space: nowrap; }
.vl-side .vl-big em { margin-left: 0; flex-basis: auto; }


/* the door of the room: who invites (rtc.js, roomCard) */
/* «Приєднатися до уроку»: a staff on top, the teacher's photo on it, everything in the middle */
.modal:has(.join-card) { width: min(380px, calc(100vw - 32px)); overflow: hidden; padding-bottom: 22px; }
.join-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.jc-band { position: relative; align-self: stretch; height: 104px; margin: -22px -22px 0; background: #f5f4f0; border-bottom: 1px solid #ebe9e2; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 0 26px; }
.jc-band i { display: block; height: 1px; background: #e2dfd5; }
.jc-logo { position: absolute; top: 14px; left: 18px; width: 64px; height: auto; padding: 3px 6px 3px 0; background: #f5f4f0; }
.join-x { z-index: 1; background: rgba(255, 255, 255, .75); }
.jc-av { position: relative; width: 88px; height: 88px; margin-top: -46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #111; color: #fff; border: 4px solid #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  font-family: "New York", ui-serif, "Iowan Old Style", Georgia, serif; font-size: 34px; font-weight: 600; }
.jc-av img { width: 100%; height: 100%; object-fit: cover; }
.jc-who { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; max-width: 100%; }
.jc-who[hidden] { display: none; }
.jc-who b { font-family: "New York", ui-serif, "Iowan Old Style", Georgia, serif; font-size: 22px; font-weight: 600; letter-spacing: -.3px; color: #111; overflow-wrap: anywhere; }
.jc-who span { font-size: 13.5px; color: #6b6f76; }
.modal h2.jc-title { margin: 20px 0 16px; padding: 0; font-size: 17px; }
.jc-field { align-self: stretch; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.jc-field > span { font-size: 12.5px; font-weight: 600; color: #6b6f76; padding-left: 2px; }
.jc-go { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 14px; font-size: 15px; }
.jc-go svg { width: 17px; height: 17px; }
.lobby-contacts { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; }
.lobby-contacts small { display: block; margin-bottom: 6px; color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.lobby-contacts div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lobby-contacts a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lobby-contacts span { color: rgba(255, 255, 255, .4); }

/* the join window: the lesson's language (UA · EN), small, at the top */

/* ============ «Групові уроки» (бета) ============ */
/* the teacher's grid (group.js): the students' tiles and the teacher's own, as many columns as fit (--gcols / --grows) */
.tiles.group-on { flex-wrap: wrap; align-content: center; gap: 10px; padding: 46px 8px 8px; }
.tiles.group-on #remoteTile, .tiles.group-on .swap-btn { display: none; }
.tiles.group-on .tile, .tiles.group-on.speaker #localTile, .tiles.group-on.speaker.swapped #localTile {
  position: relative; right: auto; bottom: auto; z-index: auto; box-shadow: none; order: 0;
  width: min(calc((100cqw - 16px - (var(--gcols, 2) - 1) * 10px) / var(--gcols, 2)), calc((100cqh - 54px - (var(--grows, 1) - 1) * 10px) / var(--grows, 1) * 16 / 9));
}
.tiles.group-on #localTile { order: 9; }
.tiles.group-on.speaker #localTile .tile-controls { transform: none; left: 10px; bottom: 10px; }
.gtile.solo { box-shadow: 0 0 0 3px #ffcc4d; }
.gtile.held video { filter: saturate(.6) brightness(.85); }
.gt-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #3a3e46 0%, #24272d 70%); }
.gt-ph span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #f2f3f5; color: #1d1f23; font-size: 26px; font-weight: 700; }
.gt-ph[hidden] { display: none; }
.gt-top { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; align-items: center; max-width: calc(100% - 20px); }
.gt-name, .gt-sing { padding: 4px 9px; border-radius: 9px; background: rgba(20, 21, 25, .72); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-sing { background: #ffcc4d; color: #3d2c00; }
.gt-level { position: absolute; left: 10px; right: 10px; bottom: 46px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.gt-level i { display: block; height: 100%; width: 0; background: #34c759; transition: width .1s linear; }
.gt-btns { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; }
.gt-btns button { height: 28px; padding: 0 10px; border-radius: 9px; background: rgba(20, 21, 25, .72); color: #fff; font-size: 12.5px; font-weight: 600; }
.gt-btns button:hover { background: rgba(20, 21, 25, .9); }
.gt-btns .gt-solo.on { background: #ffcc4d; color: #3d2c00; }
.gt-btns .gt-mute.off { background: #d13438; }
/* the bar on top: who sings, «Тиша всім», «Завершити соло» */
.group-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 14px; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); font-size: 13px; white-space: nowrap; max-width: calc(100% - 16px); }
.gb-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.group-bar button { height: 28px; padding: 0 11px; border-radius: 9px; background: var(--soft); font-size: 12.5px; font-weight: 600; }
.group-bar button.on { background: #111; color: #fff; }
.group-bar button[hidden] { display: none; }
/* a student's side: why their microphone is off, or that they sing for everybody (rtc.js onGroupMessage) */
.group-banner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 8px 14px; border-radius: 12px;
  background: #111; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); max-width: calc(100% - 24px); text-align: center; }
.group-banner[hidden] { display: none; }
/* a student's side: the classmates' small pictures (mates.js), over the top of the videos; a click makes one bigger */
.mates { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; max-width: calc(100% - 20px); }
.mates[hidden] { display: none; }
/* (narrow — a phone, the column beside the notes: to the right, clear of the name on the video; the signal stays seen) */
@container (max-width: 520px) { .mates { left: auto; right: 52px; transform: none; } }
.mate { position: relative; flex: none; width: clamp(64px, 13cqw, 168px); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--tile-bg); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 18px rgba(0, 0, 0, .3); transition: width .18s ease; }
.mate.big { width: clamp(150px, 30cqw, 360px); }
.mate.solo { box-shadow: 0 0 0 3px #ffcc4d, 0 6px 18px rgba(0, 0, 0, .3); }
.mate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mate-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #3a3e46 0%, #24272d 70%); }
.mate-ph[hidden] { display: none; }
.mate-ph span { width: 24px; height: 24px; margin-bottom: 14px; border-radius: 50%; display: grid; place-items: center; background: #f2f3f5; color: #1d1f23; font-size: 12px; font-weight: 700; }
.mate-name { position: absolute; left: 5px; bottom: 5px; max-width: calc(100% - 10px); padding: 2px 6px; border-radius: 6px; background: rgba(20, 21, 25, .72); color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mate.solo .mate-name { background: #ffcc4d; color: #3d2c00; }