.cot-sbpro-wrap{
  --cot-accent: #F5C400;
  margin: 14px 0;
}
.cot-sbpro-card{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 12px;
}
.cot-sbpro-row{
  display:flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items:center;
}
.cot-sbpro-align-left{ justify-content:flex-start; }
.cot-sbpro-align-center{ justify-content:center; }
.cot-sbpro-align-right{ justify-content:flex-end; }
.cot-sbpro-align-portal{ justify-content:space-between; }

.cot-sbpro-btn{
  width: var(--cot-btn-size,56px);
  height: var(--cot-btn-size,56px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(245,196,0,0.28);
  background: rgba(0,0,0,0.35);
  color: var(--cot-accent);
  padding: 0;
  border-radius: 16px; /* Soft Square (Option B) */
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  user-select:none;
  line-height:1;
}
.cot-sbpro-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(245,196,0,0.55);
  box-shadow: 0 0 0 3px rgba(245,196,0,0.14), 0 10px 20px rgba(0,0,0,0.35);
}
.cot-sbpro-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--cot-ico-size,26px);
  height: var(--cot-ico-size,26px);
}

.cot-sbpro-svg{ width: 26px; height: 26px; display:block; }

.cot-sbpro-streams{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cot-sbpro-stream{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(245,196,0,0.25);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.95);
  text-decoration:none;
}
.cot-sbpro-stream:hover{
  border-color: rgba(245,196,0,0.55);
  box-shadow: 0 0 0 3px rgba(245,196,0,0.14);
}

.cot-sbpro-toast{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(245,196,0,0.35);
  background: rgba(0,0,0,0.6);
  color: rgba(255,255,255,0.95);
}
.cot-sbpro-toast-show{
  animation: cotToast .18s ease-out;
}
@keyframes cotToast{
  from{ transform: translateY(6px); opacity: .0; }
  to{ transform: translateY(0); opacity: 1; }
}

@media (max-width: 520px){
  /* Mobile should look like desktop, but allow separate size tuning */
  .cot-sbpro-wrap{ --cot-btn-size: var(--cot-btn-size-m,56px); --cot-ico-size: var(--cot-ico-size-m,26px); }
  .cot-sbpro-align-portal{ justify-content: center; }
}