.table-sound-panel {
  position: absolute;
  left: calc(50% + 106px);
  top: 104%;
  z-index: 14;
  width: 190px;
  padding: .48rem;
  background: rgba(7,25,30,.94);
  border: 1px solid rgba(103,170,218,.38);
  border-radius: 11px;
  box-shadow: 0 8px 22px rgba(0,0,0,.42), 0 0 18px rgba(67,142,178,.08);
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
}
.table-sound-controls { display: grid; grid-template-columns: minmax(0,1fr) 42px 27px; gap: .28rem; }
.table-sound-controls select { min-width: 0; padding: .4rem .42rem; color: #dcebf2; background: #102a33; border: 1px solid #31515f; border-radius: 7px; outline: none; font-size: .62rem; }
.table-sound-controls select:focus { border-color: #7fc4e8; box-shadow: 0 0 0 2px rgba(85,174,221,.14); }
.table-sound-controls button { min-height: 30px; padding: .28rem .2rem; white-space: nowrap; border-radius: 7px; font-size: .58rem; }
#refresh-table-sounds { color: #8ec9ec; }
.table-sound-note { min-height: 1em; margin: .28rem .08rem 0; overflow: hidden; color: #78909b; font-size: .5rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.table-sound-note[data-state="playing"] { color: #8fd6f5; }
.table-sound-note[data-state="error"] { color: #ef918a; }
.table-sound-note[data-state="waiting"] { color: #d5b97f; }
.active-table-sounds {
  position: fixed;
  top: 76px;
  left: 16px;
  z-index: 70;
  width: min(250px, calc(100vw - 32px));
  padding: .55rem;
  color: #dcebf2;
  background: linear-gradient(145deg, rgba(7,25,30,.94), rgba(9,39,45,.9));
  border: 1px solid rgba(105,190,218,.32);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.active-table-sounds-header { display: flex; align-items: center; justify-content: space-between; margin: 0 .12rem .4rem; color: #8fc9dc; font-size: .63rem; letter-spacing: .08em; }
.active-table-sounds-header strong { min-width: 20px; padding: .12rem .3rem; color: #06242b; background: #83d3e9; border-radius: 10px; text-align: center; font-size: .58rem; }
.active-table-sound-list { display: grid; gap: .3rem; }
.active-table-sound {
  position: relative;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: .45rem;
  align-items: center;
  min-height: 39px;
  padding: .34rem .42rem .42rem;
  overflow: hidden;
  background: rgba(28,67,76,.56);
  border: 1px solid rgba(121,207,231,.14);
  border-radius: 8px;
  animation: active-table-sound-in .2s ease-out both;
}
.active-table-sound-speaker { display: grid; place-items: center; width: 27px; aspect-ratio: 1; color: #d9f7ff; background: rgba(78,175,204,.2); border-radius: 50%; box-shadow: 0 0 0 0 rgba(108,214,242,.32); font-size: .82rem; animation: active-table-sound-pulse .85s ease-out infinite; }
.active-table-sound-details { display: flex; min-width: 0; flex-direction: column; gap: .05rem; }
.active-table-sound-details strong, .active-table-sound-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-table-sound-details strong { color: #effcff; font-size: .68rem; }
.active-table-sound-details small { color: #8eabb4; font-size: .54rem; }
.active-table-sound-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, #79d6ed, #d3f7ff); transform-origin: left; animation: active-table-sound-progress var(--sound-duration, 2s) linear forwards; }
@keyframes active-table-sound-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes active-table-sound-pulse { 60% { box-shadow: 0 0 0 6px rgba(108,214,242,0); } }
@keyframes active-table-sound-progress { to { transform: scaleX(0); } }
@media (max-width: 700px) {
  .table-sound-panel { left: calc(50% + 66px); width: 118px; padding: .34rem; border-radius: 8px; }
  .table-sound-controls { grid-template-columns: minmax(0,1fr) 30px 23px; gap: .18rem; }
  .table-sound-controls select { padding: .3rem .26rem; font-size: .5rem; }
  .table-sound-controls button { min-height: 25px; font-size: .48rem; }
  .table-sound-note { margin-top: .2rem; font-size: .43rem; }
  .active-table-sounds { top: 66px; left: 8px; width: min(210px, calc(100vw - 16px)); padding: .4rem; }
}