#communication-catalog-voice-guide{
  margin:20px 0 8px;
  padding:22px;
  border:1px solid #62a8ff66;
  border-radius:22px;
  background:
    linear-gradient(145deg,#2f80ed35,#102039f5);
  box-shadow:0 18px 45px #0004;
}

.ccvg-head{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:12px;
}

.ccvg-avatar{
  display:grid;
  place-items:center;
  width:58px;
  min-width:58px;
  height:58px;
  border-radius:16px;
  background:#f5f8ff;
  font-size:2rem;
}

.ccvg-eyebrow{
  margin-bottom:3px;
  color:#a8d4ff;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.04em;
}

.ccvg-title{
  margin:0;
  font-size:clamp(1.45rem,4vw,2rem);
}

.ccvg-description{
  margin:0 0 16px;
  color:#d3deed;
  line-height:1.55;
}

.ccvg-play{
  width:100%;
  min-height:52px;
  border:1px solid #75b5ff;
  border-radius:14px;
  color:white;
  background:linear-gradient(90deg,#2f6fed,#18a7e8);
  font:inherit;
  font-weight:900;
  cursor:pointer;
}

.ccvg-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:9px;
}

.ccvg-controls button{
  min-height:48px;
  border:1px solid #ffffff2d;
  border-radius:13px;
  color:#07111f;
  background:#f4f7fb;
  font:inherit;
  font-weight:850;
  cursor:pointer;
}

.ccvg-options{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:13px;
}

.ccvg-options label{
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:700;
}

.ccvg-options input{
  width:20px;
  height:20px;
  accent-color:#2f80ed;
}

.ccvg-subtitles{
  margin-top:14px;
  padding:13px 14px;
  border-radius:13px;
  color:#e9f2ff;
  background:#07111f99;
  line-height:1.55;
}

.ccvg-subtitles[hidden]{
  display:none;
}

.ccvg-status{
  margin-top:11px;
  color:#8ecbff;
  font-size:.92rem;
}

@media(max-width:620px){
  #communication-catalog-voice-guide{
    padding:17px;
  }

  .ccvg-controls{
    grid-template-columns:1fr;
  }

  .ccvg-options{
    display:grid;
    gap:10px;
  }
}