.cot-wave-preview{
  position:relative;
  padding:22px;
  border:1px solid rgba(92, 220, 255, .22);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(6,15,24,.94), rgba(4,10,18,.98));
  box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02);
}
.cot-wave-preview__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.cot-wave-preview__title{
  margin:0 0 4px;
  font-size:22px;
}
.cot-wave-preview__hint,
.cot-wave-preview__meta,
.cot-wave-preview__status{
  color:rgba(226,241,255,.72);
}
.cot-wave-preview__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cot-wave-preview__play,
.cot-wave-preview__stop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:118px;
  padding:12px 18px;
  border:1px solid rgba(93,222,255,.42);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(18,48,71,.96), rgba(8,28,42,.98));
  color:#dff9ff;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 0 22px rgba(85,216,255,.14);
}
.cot-wave-preview__play:hover,.cot-wave-preview__stop:hover{transform:translateY(-1px);box-shadow:0 0 28px rgba(85,216,255,.22);}
.cot-wave-preview__play:focus-visible,
.cot-wave-preview__stop:focus-visible,
.cot-wave-preview__overlay:focus-visible{outline:2px solid #69ddff;outline-offset:2px;}
.cot-wave-preview__stop-icon{
  width:14px;height:14px;border-radius:2px;background:#65d1f6;
  box-shadow:0 0 8px rgba(101,209,246,.65);
}
.cot-wave-preview__play-icon{
  width:0;height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:14px solid #65d1f6;
  filter:drop-shadow(0 0 8px rgba(101,209,246,.65));
  margin-left:2px;
}
.cot-wave-preview.is-playing .cot-wave-preview__stop-icon{
  width:14px;height:14px;border-radius:2px;background:#65d1f6;
  box-shadow:0 0 8px rgba(101,209,246,.65);
}
.cot-wave-preview__play-icon{
  width:14px;height:16px;border:0;position:relative;margin-left:0;
}
.cot-wave-preview.is-playing .cot-wave-preview__play-icon::before,
.cot-wave-preview.is-playing .cot-wave-preview__play-icon::after{
  content:"";position:absolute;top:0;bottom:0;width:4px;border-radius:4px;background:#65d1f6;
  box-shadow:0 0 8px rgba(101,209,246,.65);
}
.cot-wave-preview.is-playing .cot-wave-preview__play-icon::after{right:0;}
.cot-wave-preview__canvas-wrap{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  min-height:140px;
  background:
    radial-gradient(circle at center, rgba(101,209,246,.18), rgba(101,209,246,0) 52%),
    linear-gradient(180deg, rgba(7,19,31,1), rgba(3,12,22,1));
  border:1px solid rgba(101,209,246,.14);
}
.cot-wave-preview__canvas{display:block;width:100%;height:140px;}
.cot-wave-preview__overlay{position:absolute;inset:0;background:transparent;border:0;cursor:pointer;}
.cot-wave-preview__meta{
  display:grid;
  grid-template-columns:72px 1fr 72px;
  gap:12px;
  margin-top:12px;
  font-size:13px;
  align-items:center;
}
.cot-wave-preview__time--duration{text-align:right;}
.cot-wave-preview__status{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cot-wave-preview__audio{display:none;}
.cot-wave-preview.is-ready .cot-wave-preview__status{color:rgba(226,241,255,.84);}
.cot-wave-preview.is-error{border-color:rgba(255,140,140,.3);}
@media (max-width: 700px){
  .cot-wave-preview{padding:16px;}
  .cot-wave-preview__title{font-size:20px;}
  .cot-wave-preview__hint{font-size:15px;line-height:1.45;}
  .cot-wave-preview__head{align-items:flex-start;flex-direction:column;}
  .cot-wave-preview__actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
  }
  .cot-wave-preview__play,
  .cot-wave-preview__stop{
    width:100%;
    min-width:0;
    padding:10px 12px;
    font-size:15px;
    gap:8px;
    white-space:nowrap;
  }
  .cot-wave-preview__meta{grid-template-columns:56px 1fr 56px;font-size:12px;gap:8px;}
  .cot-wave-preview__canvas{height:120px;}
}
@media (max-width: 420px){
  .cot-wave-preview__actions{grid-template-columns:1fr 1fr;gap:8px;}
  .cot-wave-preview__play,
  .cot-wave-preview__stop{padding:9px 10px;font-size:14px;}
  .cot-wave-preview__stop-icon{width:12px;height:12px;}
  .cot-wave-preview__play-icon{width:12px;height:14px;}
}